如何在一行中对齐 DIV [重复]
Posted
技术标签:
【中文标题】如何在一行中对齐 DIV [重复]【英文标题】：How to align DIVs in a row [duplicate] 【发布时间】：2016-07-03 05:56:10 【问题描述】：参考下面的 html，有四个 DIV 容器，每个容器都包含一个图像、标题元素、段落元素和一个链接。当页面在全尺寸计算机显示器上打开时，我希望三个 div 在屏幕上并排对齐。
到目前为止，它们只是垂直堆叠在屏幕下方。
<div class="threeSpread">
<div class="outer">
<img src="imagesForNew/new1.jpg">
<h2>CHININESE INVESTORS COME TO DETROIT</h2>
<p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
<a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
</div>
<div class="inner">
<img src="imagesForNew/new1.jpg">
<h2>CHININESE INVESTORS COME TO DETROIT</h2>
<p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
<a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
</div>
<div class="outer">
<img src="imagesForNew/new1.jpg">
<h2>CHININESE INVESTORS COME TO DETROIT</h2>
<p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
<a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
</div>
</div>
CSS
div
display: block;
.threeSpread
margin: 0 40px 40px 40px;
div.inner, div.outer
max-width: 30%;
@media (max-width: 568px)
.outer img
float: left;
margin-right: 5px;
.inner img
float: right;
margin-right: 5px;
h2
margin-top: 50px
【问题讨论】：
将 3 个 div 与 flexbox 对齐：***.com/a/32122011/3597276 【参考方案1】：制作display:inline-block;
div
display: inline-block;
工作示例：http://codepen.io/anon/pen/GZrNQe
否则，
div
display: inline-block;
.threeSpread
margin: 0 40px 40px 40px
div.inner, div.outer
max-width: 30%;
@media (max-width: 568px)
.outer img float: left;
margin-right: 5px;
.inner img (float: right;
margin-right: 5px;
)
h2 margin-top: 50px
<html>
<head>
<link rel="stylesheet" href="new.css" type="text/css" charset="utf-8">
</head>
<body>
<div class="threeSpread">
<div class="outer">
<img src="imagesForNew/new1.jpg">
<h2>CHININESE INVESTORS COME TO DETROIT</h2>
<p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
<a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
</div>
<div class="inner">
<img src="imagesForNew/new1.jpg">
<h2>CHININESE INVESTORS COME TO DETROIT</h2>
<p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
<a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
</div>
<div class="outer">
<img src="imagesForNew/new1.jpg">
<h2>CHININESE INVESTORS COME TO DETROIT</h2>
<p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
<a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
</div>
</div>
</body>根据learnlayout.com，
您可以创建一个填充浏览器宽度并换行的方框网格 很好。很长一段时间以来，使用
float就可以做到这一点，但现在 使用inline-block会更容易。inline-block元素就像 内联元素，但它们可以有width和height。
【讨论】：
【参考方案2】：将 div 类的显示键更改为
display:inline-block
也看看这个 http://www.w3schools.com/css/css_inline-block.asp
【讨论】：
以上是关于如何在一行中对齐 DIV [重复]的主要内容，如果未能解决你的问题，请参考以下文章