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

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

このフィドルを見てください。

ヒント

同じcssにinline-cssを何度も使用しないでください。cssクラスを作成し、好きな場所で呼び出します

于 2013-02-25T14:02:19.797 に答える
0

それらは「インライン」になりません..それらはブロックです。それらを左にフロートさせるだけで、強制的に流れに戻ります。

于 2013-02-25T13:52:28.217 に答える
0

float: left2 番目の 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

メイン div 内vertical-align: top;の 4 つの s のそれぞれに追加します (最初のもの、 )div<div style="display:block">

于 2013-02-25T14:04:07.130 に答える
0

問題を正しく理解している場合は、div で以下を使用してみてください。

float: left;

また、ひどいインライン スタイリングではなく、スタイルシートを使用することをお勧めします。

于 2013-02-25T13:52:05.783 に答える
0

ここで得た 2 つの良い提案に同意します。(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

やってみましたか

<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 に答える