0

为什么将文本添加到内联 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>
4

8 回答 8

0

你试过做

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

于 2013-02-25T13:47:04.837 回答
0

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

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

display: inherit;

在子 div 上。

于 2013-02-25T13:49:59.140 回答
0

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

float: left;

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

于 2013-02-25T13:52:05.783 回答
0

他们不会得到'内联'..他们是块。只是将它们向左浮动将迫使它们回到流动中。

于 2013-02-25T13:52:28.217 回答
0

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

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

他们排成一列！

小提琴

于 2013-02-25T13:53:32.887 回答
0

我同意你在这里得到的两个好建议：（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/

于 2013-02-25T13:57:48.900 回答
0

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

和CSS

.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;
 }
 }

看看这个Fiddle。

提示

您不应该一次又一次地为同一个 css 使用 inline-css。创建一个 CSS 类并在任何你想要的地方调用它

于 2013-02-25T14:02:19.797 回答
0

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

于 2013-02-25T14:04:07.130 回答