CSS水平对齐三个div

标签 css

我在对齐父 div 内的三个 div 时遇到问题,我需要的效果如下

|IMAGE| +TEXT+ |IMAGE|

每个 div 分别包含一个图像 (2) 和文本 (1)。对齐它们很容易,问题是我希望 CENTER div 的宽度自动适应浏览器窗口的大小,并使其他 IMAGE div 始终分别位于右侧和左侧。

例如,如果用户最大化窗口:

|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|

如您所见,想法是中心 div 增长,自动宽度但保持结构。

我怎样才能得到这种行为?提前致谢。

最佳答案

#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }

如果仍然不能满足您的要求,请提供更详细的要求。

关于CSS水平对齐三个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3628515/

相关文章:

jquery - 动画宽度。为什么它不起作用?

css - 如何将边框应用于 <a> 链接?

javascript - 背景视频禁用链接

python - 使用 Python 格式化内联 CSS

类里面的 PHP session

html - CSS border-bottom 属性无效

css - 编码 CSS3 阴影的最佳方式?

html - css 卡片翻转动画后无法交互

html - 如何将文本放在 div 标签下方?

css - 如何在 Ionic 4 中更改选项卡栏和选项卡图标的背景颜色