div块的html css问题

Question

我需要像图像一样的块:

但在我添加此代码后:

    <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

浮动与显示:内联块

您的代码不起作用的原因是因为您正在使用display: inline-block;.如果你使用float: left;它会使具有这个属性的元素相互浮动,而不会撞击其他元素,只要这些其他元素也有浮动(除了宽度超过屏幕的宽度).

CSS Float

编码行为不良

您可以更改字体大小或注释掉空格,甚至删除结束标记(HTML5支持),但这些方法只是伤口上的石膏(编码行为非常糟糕,请不要做这个).如果使用float来使元素合适,则不必进行任何"修复"以使其工作.

良好编码实践的例子

具体看一下1,3和4,但整个页面读起来非常好.

CSS

关于分配css的主题:您应该始终使用基于类的样式而不是内联css,原因如下:

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

为元素分配样式的不同方法

请尝试以下方法:

工作小提琴

<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>