Question

如果之前有人问过这个问题，我会道歉，但我找不到确切的答案。

不使用媒体查询或javascript / jquery，我需要让我的5个div显示如下：

A B C
D E

并在较小的屏幕上转到

A B
C D
ë

但是我得到了这个：

A B C
...... D
ë

如果我添加＆＃39; clear：float;＆＃39;到了第4个div，在一个较小的屏幕上，它就是这个：

A B
ç
D E

我不想要的。

我不想指定每个div的高度，因为可能会随着时间的推移添加内容。

任何人都可以在我的代码中指出我出错的地方，提前谢谢！

P.S。我的所有CSS都是内联的，因为我们所有的系统都可以保证工作 - 对不起！

＆＃13;

<center>
<div style="width:100%; max-width:1000px;">

<div style="max-width:333px; width:100%; display:inline-block; float:left; text-align:left;  padding-bottom:10px; color:rgb(71,70,70); font-family:arial, verdana, sans-serif;">
<span style="font-size:18px; font-weight:bold;">A</span>
<ul style="font-size:13px; list-style-type:none; padding-left:10px;">
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
</ul>

</div>

<div style="max-width:333px; width:100%; display:inline-block;  float:left; text-align:left;  padding-bottom:10px; color:rgb(71,70,70); font-family:arial, verdana, sans-serif;">
<span style="font-size:18px; font-weight:bold;">B</span>
<ul style="font-size:13px; list-style-type:none; padding-left:10px;">
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
</ul>

</div>

<div style="max-width:333px; width:100%; display:inline-block;  float:left; text-align:left; padding-bottom:10px; color:rgb(71,70,70); font-family:arial, verdana, sans-serif;">
<span style="font-size:18px; font-weight:bold;">C</span>
<ul style="font-size:13px; list-style-type:none; padding-left:10px;">
<li>XX</li>
<li>XX</li>
<li>XX</li>
</ul>
</div>

<div style="max-width:333px; width:100%; display:inline-block; float:left; text-align:left; padding-bottom:10px; color:rgb(71,70,70); font-family:arial, verdana, sans-serif;">
<span style="font-size:18px; font-weight:bold;">D</span>
<ul style="font-size:13px; list-style-type:none; padding-left:10px;">
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
</ul>
</div>

<div style="max-width:333px; width:100%; display:inline-block;  float:left; text-align:left;  padding-bottom:10px; color:rgb(71,70,70); font-family:arial, verdana, sans-serif;">
<span style="font-size:18px; font-weight:bold;">E</span>
<ul style="font-size:13px; list-style-type:none; padding-left:10px;">
<li>XX</li>
<li>XX</li>
</ul>
</div>




</div>
</center>

＆＃13;

Answer 1

<强>说明：

在评论中，您表示您认为这将是一个简单的解决方法 - 您是对的。

我们所要做的一切：

在包装器max-width上设置div _{（如果文本div是<body>的直接子项，则可以根据需要在<body>设置最大宽度。）}
_{（只有当你特别要求包装器div永远不会大于某个值时才需要这个。如果包装器占用了它所有的空间，你就可以了，你不需要设置{{1} }。max-width自动占用其父容器中100％的可用宽度。）}
在每个文本div上设置Div _{我们可以在文本div上设置max-width，但是在真正的小屏幕上它们会太大。（在大多数情况下，最好有一个不需要水平滚动来查看内容的网站。）按照目前的情况，文本div几乎保证为width，除非屏幕太小而不能使用那么大。 300px会消除这种灵活性。}
在每个文本div上设置width _{如果我们使用display: inline-block;（div的默认值），则每个文本div都在它自己的行上。如果我们使用display: block;，那么我们就无法设置文本div的维度。}
（可选：在每个文本div上设置vertical-align，以便它们以您希望的方式彼此垂直排列。

您不需要做的事情：

为什么对已设置display: inline;的元素使用width。
_{您可能尝试以与max-width相同的方式使用width。如果是这样，为什么不使用min-width？（不要忘记使用min-width和min-width的潜在缺点。您可能还记得，上面已经概述了它们。）}
不要使用width！ HTML5中不是supported！
_{而是在您想要居中的块元素上设置<center>（或margin-left: auto; margin-right: auto;）。在您想要居中的margin: 0 auto;和text-align: center;元素的父级上设置inline。}
您无需使用inline-block即可完成此操作。

检查一下：

Here's a Plunker.

AND 这是一段代码：

float

其他

吸管是最容易理解的。希望代码片段能够“复制并粘贴”。

我强烈建议您阅读plunker的css中的注释，以便了解为什么<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body style="font-family: arial, verdana, sans-serif; text-align: left;"> <div style="margin: 0 auto; max-width: 1000px; color: rgb(71,70,70);"> <div style="display: inline-block; max-width: 300px; padding-bottom: 10px; vertical-align: top;"> <span style="color: orange; display: block; font-size: 18px; font-weight: bold;">A</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium orci a lorem semper, vel maximus elit tincidunt. Duis placerat sem vel cursus efficitur. Praesent condimentum facilisis mi, eu elementum nibh venenatis quis. Sed orci neque, viverra sit amet laoreet at, finibus nec velit. Vestibulum eu urna quis ex elementum lacinia non accumsan risus. Suspendisse potenti. Vestibulum non congue mi. Sed viverra orci ac magna mattis suscipit. Vestibulum hendrerit nisl quis ipsum placerat vulputate. </div> <div style="display: inline-block; max-width: 300px; padding-bottom: 10px; vertical-align: top;"> <span style="color: orange; display: block; font-size: 18px; font-weight: bold;">B</span> Curabitur vel dolor a nibh condimentum vestibulum. Nullam fermentum pulvinar est id vestibulum. Morbi libero nunc, congue sit amet turpis ac, sodales mattis orci. Vestibulum lectus metus, aliquam a diam ut, cursus ultrices sem. In dictum velit sed lorem facilisis, sit amet finibus lectus ornare. Praesent aliquam sed est hendrerit rutrum. Aliquam consequat arcu sed metus scelerisque, id porta leo rutrum. Aenean faucibus id velit at porttitor. </div> <div style="display: inline-block; max-width: 300px; padding-bottom: 10px; vertical-align: top;"> <span style="color: orange; display: block; font-size: 18px; font-weight: bold;">C</span> Donec a tellus lectus. Aliquam erat volutpat. Quisque finibus porta urna. Suspendisse faucibus nulla sit amet convallis cursus. Aliquam placerat justo eget imperdiet varius. Etiam blandit risus eget eros scelerisque, quis venenatis orci dapibus. Integer scelerisque urna sed elit mattis porttitor. </div> <div style="display: inline-block; max-width: 300px; padding-bottom: 10px; vertical-align: top;"> <span style="color: orange; display: block; font-size: 18px; font-weight: bold;">D</span> Maecenas vestibulum mollis tincidunt. Nulla pellentesque massa eu ante luctus, et dapibus arcu vestibulum. In nec placerat tortor. Vestibulum libero dolor, scelerisque sit amet posuere feugiat, efficitur a augue. In a accumsan dolor. Nulla porta purus arcu, et cursus diam laoreet quis. Aliquam eget tincidunt mauris, eget molestie risus. </div> <div style="display: inline-block; max-width: 300px; padding-bottom: 10px; vertical-align: top;"> <span style="color: orange; display: block; font-size: 18px; font-weight: bold;">E</span> In ac imperdiet neque. Morbi vulputate, leo eu interdum posuere, metus lorem tristique est, vel semper magna eros a magna. Maecenas id nulla ut massa bibendum ornare ac eget sapien. Praesent in venenatis mi. Vestibulum et iaculis erat. Integer sed magna ac ligula venenatis feugiat. Curabitur purus turpis, iaculis eget feugiat a, mattis quis mi. </div> </div> </body> </html>在文本div上如此之小。如果您想了解解决问题的其他方法，您应该阅读this article。

您可能还想将max-width放在包装器div上，以便文本div居中。

PS：有问题......？请问。

如何让多个div在偶数行中显示而不指定高度？

1 个答案: