Question

我在容器中包含了三个div。在每个div中，下面有一个图像和文本。我希望将所有三个div并排并保持响应。我有这个设置之前它保持我想要它的方式，但现在正确的div落在另外两个屏幕收缩然后中间的一个下降。我知道我可以保持这三个并排，因为我之前已经完成了。我无法弄清楚我是怎么做到的。

HTML

<div id='container'>

    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3></a><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>

    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>

    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>

    <div>

CSS

.one-third  {
    width: 30%;
    display: inline-block;
    margin: 5% 0 0 2.5%; }

.one-third img {
    width: 100%;
    height: 300px; }

.one-third h3 {
    margin: .5em 0 2em 0; }

Answer 1

您的代码似乎按预期工作，请参阅下文。

如果你的页面缩小得足够多，最终会缩小单词的宽度＆＃34;标题＆＃34;在h3中将大于页面宽度的1/3，这将强制内联块元素开始包装。

如果您尝试使用CSS表格，则可以将所有三个项目保留在一行中，但之后会触发溢出条件。

您需要考虑您希望布局在极端狭窄的情况下如何表现。

＆＃13;

.one-third {
  width: 30%;
  display: inline-block;
  margin: 5% 0 0 2.5%;
}
.one-third img {
  width: 100%;
  height: 300px;
}
.one-third h3 {
  margin: .5em 0 2em 0;
}

＆＃13;

<div id='container'>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
    </a>
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p>
  </div>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
    </a>
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p>
  </div>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
    </a>
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p>
  </div>

  <div>

＆＃13;

Answer 2

没有帮助你有一个未关闭的<a>标签，我建议你不要在<img>上设置一个高度，除非你想要缩放图像时扭曲图像观点。但要解决您所要求的问题，可以通过以下方式解决：

在display: inline-block

display: block

.one-third {}

在float: left;

.one-third {}

JSFiddle在这里为你

更正后的代码：

.one-third  {
    max-width: 30%;
    display: block;
    float: left;
    padding: 5% 0 0 2.5%; 
}

.one-third img {
    width: 100%;
}

.one-third h3 {
    padding: 0.5em 0 2em 0;
}

<div id='container'>
    <div class='one-third'>
        <a>
            <img src='http://gratisography.com/pictures/264_1.jpg'>
            <h3>Headline</h3>
        </a>
        <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>
    <div class='one-third'>
        <a>
            <img src='http://gratisography.com/pictures/264_1.jpg'>
            <h3>Headline</h3>
        </a>
        <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>
    <div class='one-third'>
        <a>
            <img src='http://gratisography.com/pictures/264_1.jpg'>
            <h3>Headline</h3>
        </a>
        <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>
</div>

Answer 3

尝试将box-sizing: border-box;添加到.one-third规则中。这也包括将边距和填充包含在元素的整体宽度中。

Answer 4

将父级font-size设置为0，然后将子级重置为之前的大小。对于演示，我将div设置为每个父节点的33％：

.one-third {
  width: 33%;
  display: inline-block;
  margin: 0%;
  font-size: 12px;
}
.one-third img {
  width: 100%;
  height: 300px;
}
.one-third h3 {
  margin: .5em 0 2em 0;
}
#container {
  font-size: 0;
}

<div id='container'>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
    </a>
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p></a>
  </div>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
      <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p></a>
  </div>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
      <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p>
</a>     
 </div>

  <div>

^{积分需要转到@Marc Audet，以进一步了解您的<a>代码需要关闭才能获得正确的HTML标记。}

Answer 5

您需要做的就是将float: left;添加到.one-third

这是一个有效的JSFiddle： https://jsfiddle.net/05x1p2ch/

Answer 6

删除div之间的空格：

<div id='container'>

    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3></a><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div><div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div><div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>

    <div>

或者使用float属性。

保持三个div内联

6 个答案: