1

私は2つのdivを並べて表示しようとしていますが、運が悪かったのです。何故ですか？

<div class="popup-container">
  <div class="popup-header">
      <div class="popup-image-holder"></div>

    <div class="image-titles">Content for  class "image-titles" Goes Here</div>
  </div>
</div>


.popup-container {
    padding: 0px;
    width: 764px;
}
.popup-header {
    background-color: #000;
    padding: 21px;
    height: 243px;
    width: 100%;
    overflow: hidden; /* add this to contain floated children */
}
.popup-image-holder {
    float; left;
    background-color: #FFF;
    height: 165px;
    width: 165px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    padding-top: 5px;
    padding-left: 5px;
}
.image-titles {
    float: left;
    height: 100%;
    width: 300px;
    background-color: #666;
}

ありがとう編集：JsFiddle

4

2 に答える 2

1

少なくとも、'display' 属性を最も外側のコンテナーに設定してみてください。

例: 必要に応じて他の要素に追加します。 .popup-container { display: block; padding: 0px; width: 764px; }

于 2012-12-28T23:29:23.810 に答える
1

うーん。あなたのタイプミス; の代わりに：popup-image-holderdivでこれを試してください

  .popup-image-holder {
float: left;
background-color: #FFF;
height: 165px;
width: 165px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
padding-top: 5px;
padding-left: 5px;
}

ここでフィドル

于 2012-12-28T23:30:49.113 に答える