html - 为什么这些 div 没有水平对齐？他们为什么换行？

Question

这个 HTML:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;">
    <div style="border:1px solid red; height:50px; width:80px;"></div>
    <div style="border:1px solid red; height:50px; width:80px;"></div>
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
    <div style="border:1px solid red; height:50px; width:80px;"></div>
</div>

为什么红色 div 不在同一水平行中，如何让它们在同一行中？

Answer 1

这是你要找的:

<style type="text/css">
    div.littleDiv {
        display: inline-block;
        border:1px
        solid red; 
        height:50px; 
        width:80px;
    }
</style>
<div style="border:1px solid blue; margin: auto; height:250px; width:600px;">
    <div class="littleDiv"></div>
    <div class="littleDiv"></div>
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div>
</div>

This has been possible for a long time using float, but now with inline-block it's even easier. inline-block elements are like inline elements but they can have a width and height.

但是您可能想使用 float: lefts 而不是 display: inline-block;

来自 MDN

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.