0

我需要有像图像上的块：

在此处输入图像描述

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

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

我有这个结果： 在此处输入图像描述

4

7 回答 7

5

浮动与显示：内联块

您的代码不起作用的原因是因为您使用的是display: inline-block;. 如果你使用float: left;它，只要这些其他元素也有浮动，它将使具有此属性的元素相互浮动而不会撞到其他元素（宽度超过屏幕宽度时除外）。

CSS 浮点数

不良编码行为

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

良好编码实践的例子

具体看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>
于 2013-07-30T12:11:22.100 回答
4

因为您已将显示类型设置为inline-block，所以您的浏览器将考虑任何空白。把它注释掉，你应该没问题：

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

这是一个比较两者的JSFiddle。

于 2013-07-30T12:07:20.317 回答
2

尝试这个

删除display:block并写入float:left;

http://jsfiddle.net/2Xh75/2/

<div style="width:100%; height:50px;">
         <div style="float:left; width:50%; height:50px; background-color:green;"> </div>
         <div style="float:left; width:50%; height:50px; background-color:red;"> </div>
 </div>
于 2013-07-30T12:06:38.297 回答
2

导致您出现问题的原因是周围的空白。

删除两个 div 之间的所有空格和制表符，它就可以正常工作了。

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

http://jsfiddle.net/9UDPh/1/

当然，实际上您应该将样式移动到一个类中，尽可能避免使用内联样式。

于 2013-07-30T12:09:11.280 回答
1 
<div style="width:100%; height:50px;">
     <div style="float:left;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>
于 2013-07-30T12:06:46.697 回答
0

评论技巧可以消除中间的空白，你也可以试试这个

     <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 字体大小设置为零！也会成功的

于 2013-07-30T12:45:10.483 回答
0

float 迫使元素彼此内联。您也可以将宽度减小一点，例如每个宽度为 49%，即使没有浮动它也可以工作。

于 2013-07-30T12:13:31.107 回答