如何在一行中对齐 DIV [重复]答案

【问题标题】：How to align DIVs in a row [duplicate]如何在一行中对齐 DIV [重复]
【发布时间】：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 对齐：stackoverflow.com/a/32122011/3597276

标签： html css rows

【解决方案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

【讨论】：