Question

为什么在内联div中的内容div中添加文本后div不会内联？这是一个错误吗？我在这里添加了我的代码。我和jfiddle一起尝试过。但还没有解决方案。

<div style="display:block">
<div style="width:230px; color:#000; background-color:#EAEAEA; border-radius:6px;display:inline-block; ">
    <div style="text-transform:uppercase;font-size:14px;color:#000000;text-align:center;background-color:#FFFFFF;margin-top:6px;padding:5px;" class="font">
        Colombo City
    </div>
    <div style="width:202px;height:202px;background-image:url(images/colombo.png);margin:14px;">
    </div>
    <div style="margin:14px;word-wrap:break-word;width:202px;height:200px;background-color:#0099CC;">
        add more textadd more textadd more textadd more textadd more textadd more text
    </div>
</div>
<div style="width:230px; color:#000; background-color:#EAEAEA; border-radius:6px; display:inline-block;margin-left:3px; ">
    <div style="text-transform:uppercase;font-size:14px;color:#000000;text-align:center;background-color:#FFFFFF;margin-top:6px;padding:5px;" class="font">
        Great Sigiriya
    </div>
    <div style="width:202px;height:202px;background-image:url(images/sigiriya.png);margin:14px;">
    </div>
    <div style="margin:14px;word-wrap:break-word;width:202px;height:200px;background-color:#0099CC;">
        Colombo
    </div>
</div>
<div style="width:230px; color:#000; background-color:#EAEAEA; border-radius:6px;display:inline-block;margin-left:3px; ">
    <div style="text-transform:uppercase;font-size:14px;color:#000000;text-align:center;background-color:#FFFFFF;margin-top:6px;padding:5px;" class="font">
        YALA National Park
    </div>
    <div style="width:202px;height:202px;background-image:url(images/hillcountry.png);margin:14px;">
    </div>
    <div style="margin:14px;word-wrap:break-word;width:202px;height:200px;background-color:#0099CC;">
        Colombo
    </div>
</div>
<div style="width:230px; color:#000;  background-color:#EAEAEA; border-radius:6px; display:inline-block;margin-left:3px;">
    <div style="text-transform:uppercase;font-size:14px;color:#000000;text-align:center;background-color:#FFFFFF;margin-top:6px;padding:5px;" class="font">
        Arts & Crafts
    </div>
    <div style="width:202px;height:202px;background-image:url(images/crafts.png);margin:14px;">
    </div>
    <div style="margin:14px;word-wrap:break-word;width:202px;height:200px;background-color:#0099CC;">
        Colombo
    </div>
</div>
</div>

Answer 1

你试过吗

<div style="text-transform:uppercase;font-size:14px;color:#000000;text-align:center;background-color:#FFFFFF;margin-top:6px;padding:5px; display:inline;" class="font">Colombo City</div>

??好像你想要这些div内联所以为什么他们没有这种风格呢？除了最好的 <div style="text-transform:uppercase;font-size:14px;color:#000000;text-align:center;background-color:#FFFFFF;margin-top:6px;padding:5px; float:left;" class="font">Colombo City</div>

Answer 2

您的问题是，默认情况下，CSS display属性不是继承属性（即display: inline-block不会级联到子元素。）

如果要在父项上设置显示并继承子项，则需要添加：

display: inherit;

关于儿童div。

Answer 3

如果我正确理解您的问题，您可以尝试在您的div上使用以下内容。

float: left;

我还建议使用样式表而不是可怕的内联样式。

Answer 4

他们不会'内联'..他们是BLOCKS。 只需将它们向左浮动将强制em回流。

Answer 5

我已将float: left添加到您的第二个div：

<div style="width:230px; color:#000; background-color:#EAEAEA; border-radius:6px;display:inline-block;float:left ">

他们排队了！

<强> Fiddle

Answer 6

我同意你在这里提出的两条好建议：（1）使用花车; （2）使用样式表。

但只是你知道为什么它没有对齐，你需要添加：

vertical-align: top

到内联块的每个div。原因是高度变化。在此处阅读更多内容：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

在这里小提琴：http://jsfiddle.net/QKNg8/1/

Answer 7

请勿inline-block为每个div float使用<div style="display:inline-block"> <div class="mainsquare"> <div class="font titlesquare">Colombo City</div> <div class="imagesquare1"></div> <div class="contentsquare">Colombo Colombo Colombo Colombo Colombo Colombo Colombo Colombo Colombo Colombo Colombo </div> </div> <div class="mainsquare left"> <div class="font titlesquare">Great Sigiriya</div> <div class="imagesquare2"></div> <div class="contentsquare">Colombo </div> </div> <div class="mainsquare left"> <div class="font titlesquare">Colombo City</div> <div class="imagesquare1"></div> <div class="contentsquare">Colombo </div> </div> <div class="mainsquare left"> <div class="font titlesquare">Great Sigiriya</div> <div class="imagesquare2"></div> <div class="contentsquare">Colombo</div> </div> </div>。它会为你做。

.mainsquare{
 width:230px; color:#000; background-color:#EAEAEA; border-radius:6px;
 float:left;
}
.titlesquare{
  text-transform:uppercase;font-size:14px;color:#000000;text-align:center; 
   background-color:#FFFFFF;margin-top:6px;padding:5px;
}

.contentsquare{
  margin:14px;word-wrap:break-word;width:202px;height:200px;
   background-color:#0099CC;
 }

.imagesquare1{
   width:202px;height:202px;background-image:url(../images/colombo.png);
    margin:14px;
 }

.imagesquare2{
  width:202px;height:202px;background-image:url(../images/sigiriya.png);
   margin:14px;
 }

.imagesquare3{
  width:202px;height:202px;background-image:url(../images/hillcountry.png);
    margin:14px;
 }

.imagesquare4{
  width:202px;height:202px;background-image:url(../images/crafts.png);
    margin:14px;
 }
.left{
  margin-left:3px;
 }
 }

和css

{{1}}

请看一下 Fiddle 。

提示

你不应该一次又一次地对同一个css使用inline-css。制作一个css课程，并在任何你想要的地方打电话

Answer 8

将vertical-align: top;添加到主div中的四个div中的每一个（第一个<div style="display:block">）

添加文本后，Div不会内联

8 个答案: