css - div block 的html css问题

Question

我需要像图片一样的方 block :

但是在我添加这段代码之后:

    <div style="width:100%; height:50px;">
         <div style="display: inline-block; width:50%; height:50px; background-color:green;"> </div>
         <div style="display: inline-block; width:50%; height:50px; background-color:red;"> </div>
 </div>

我有这样的结果:

Answer 1

float 与显示:内联 block

您的代码不起作用的原因是因为您正在使用 display: inline-block;。如果您使用 float: left; 它将使具有此属性的元素相互 float 而不会使其他元素向下碰撞，只要这些其他元素也具有 float (除了当宽度超过屏幕)。

CSS Float

不良编码行为

您当然可以更改字体大小或注释掉空格，甚至删除结束标记(HTML5 支持)，但这些方法只是伤口上的膏药(而且是非常糟糕的编码行为，请不要永远不要这样做)。如果您使用 float 使元素适合，则无需进行任何“修复”即可使其正常工作。

examples of good coding practices

具体看 1、3 和 4，但整个页面都非常好读。

CSS

关于分配css的话题:出于以下原因，您应该始终使用基于类的样式而不是内联 css:

1. 它更易于阅读(对您和其他人而言)并且看起来更漂亮。
2. 它允许使用外部 CSS 文件。
3. 它允许更轻松地使用带有类/id 选择器的 JQuery 或 Javascript。
4. 这是一种更专业的编码方法。
5. 您可以将多个类分配给一个元素，从而无需编写两次相同的代码。
6. 更容易在控制台(FireBug/Chrome 控制台)中调试代码。
7. 所有很酷的 child 都在这样做。

Different methods of assigning style to elements

尝试以下操作:

Working Fiddle

<style>
    #main {
        width: 100%;
        height: 50px;
    }
    #green {
        width: 50%;
        height: 50px;
        background-color: green;
        float: left;
    }
    #red {
        width: 50%;
        height: 50px;
        background-color: red;
        float: left;
    }
</style>
<div id="main">
    <div id="green"></div>
    <div id="red"></div>
</div>