Question

我有两个div，它们有一些宽度。但我希望每个div都占用空间，因为它在width属性中给出，而不管div中的内容如何。目前，每个div都占用了内部空间，并忽略了width属性中给出的内容。

我的HTML在下面给出，

  <div style="margin-left:100px; display:inline;  border-width:10px; width:30%; border-     style:solid;">
fawad
</div>
<div style=" margin-left:10px;  display:inline; border-width:10px; width:30%; border-style:solid">ali</div>

Answer 1

只需更改

即可

display:inline;

为：

display: inline-block;

http://jsfiddle.net/osx76nbr/

Answer 2

您可以使用css属性display:inline-block;。这有助于将div设置为内嵌。

Answer 3

您需要应用display块样式。在这种情况下，我会申请

<div style="margin-left:100px; display:inline-block;  border-width:10px; width:30%; border-     style:solid;">
fawad
</div>
<div style=" margin-left:10px;  display:inline-block; border-width:10px; width:30%; border-style:solid">ali</div>

或者，我会将所有这些设置应用于样式表并将类应用于div，而不是像这样使用内联样式。

.inline-div {
    display: inline-block;
    border: 10px solid;
    width: 30%;
}

<div class="inline-div"></div>

更好的是，我会调查网格系统，就像在bootstrap或foundation中找到的那样。这样你就可以应用网格样式。

<div class="row">
    <div class="col-4">
    <div class="col-4">
    <div class="col-4">
</div>

Answer 4

只需要的东西

display:inline-block;

就是这样

Answer 5

尝试添加

div { float:left }

这会让div尊重财产。

div width属性与内容

5 个答案: