用左浮動CSS排列SPAN和DIV

Question

我試圖將我的跨度安排到一個左浮點的div上，但是當我在CSS中將浮點數放到左邊時，似乎該跨度就不在div內了。

我正在嘗試用圖片解釋：

這是我嘗試編寫的代碼：

的HTML

    <div class="block1">
        <div class="head-block-1">
            Best Selling Tickets
        </div>
        <div class="content-block-1">
            <div>
                <span class="data-block-1">
                    <img src="/nutickets2/images/circle.png" height="55px">
                </span>
                <span class="data-block-1">
                    <span>Adult - General</span><span><br>TEST TEST</span>
                </span>
                <span class="data-block-1">
                    <span>50 sold since Jan 17</span><span><br>20% more sold than last period</span>
                </span>
            </div>
        </div>
    </div> 

的CSS

.block1 {
    width: 96%;
    height: 96%;
    box-shadow: 2px 2px 2px #d1d1d1;
    margin-bottom: 25px;
    margin-left: 10px;
}

.head-block-1 {
    width: 100%;
    background-color: #f6f6f6;
    padding: 15px;
    border: 1px solid #d1d1d1;
}

.content-block-1 {
    width: 100%;
    border: 1px solid #d1d1d1;
    padding: 15px;
}

.data-block-1 {
    width: 33%; 
    float: left;
}

Answer 1

添加overflow:auto; 到包含的div。

父元素永遠不會擴展以包含浮動子元素。 因此，要使它們做到這一點，您需要告訴父級，容器中溢出的元素應自動擴展以包含它們。

還有其他方法可以做到這一點，但這是最簡單的。 搜索“清理浮標”

Answer 2

使用浮點數可使父元素折疊其高度。 為了保持其高度，我們需要清理浮子。 因此，最好的方法是在浮動元素的底部添加clearfix元素。

嘗試這個

的HTML

<div class="block1">
  <div class="head-block-1">
    Best Selling Tickets
  </div>

  <div class="content-block-1">
    <div>
      <span class="data-block-1 img-block">
      <img src="/nutickets2/images/circle.png" height="55px">
      </span>
      <span class="data-block-1">
        <span>Adult - General</span><span><br>TEST TEST</span>
      </span>
      <span class="data-block-1">
        <span>50 sold since Jan 17</span>
        <span><br>20% more sold than last period</span>
      </span>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

的CSS

.block1 {
    width: 96%;
    height: 96%;
    box-shadow: 2px 2px 2px #d1d1d1;
    margin-bottom: 25px;
    margin-left: 10px;
}

.head-block-1 {
    width: 100%;
    background-color: #f6f6f6;
    padding: 15px;
    border: 1px solid #d1d1d1;
}

.content-block-1 {
    width: 100%;
    border: 1px solid #d1d1d1;
    padding: 15px;
}
.clearfix
{
  display:table;
  clear:both;
}
.data-block-1 {
    width: 33%; 
    float: left;
}

希望這可以幫助...

Answer 3

或者，考慮使用Flexbox而不是float。 Flexbox簡化了布局，可以避免浮動。

 .block1 { width: 96%; box-shadow: 2px 2px 2px #d1d1d1; margin-bottom: 25px; margin-left: 10px; } .content-block-1 { display: flex; justify-content: space-around; border: 1px solid #d1d1d1; padding: 15px; } .head-block-1 { background-color: #f6f6f6; border: 1px solid #d1d1d1; padding: 15px; } img { border-radius: 50%; } 

 <div class="block1"> <div class="head-block-1"> Best Selling Tickets </div> <div class="content-block-1"> <span> <img src="http://placehold.it/55/bda603"> </span> <span>Adult - General<br>TEST TEST </span> <span>50 sold since Jan 17<br>20% more sold than last period </span> </div> </div> 

Answer 4

您針對“數據塊1”的類為33％，每個“跨度”相等。 因此，如果要使第二個“跨度”更靠近左側，則需要更改左側“跨度”的寬度。 我已將“ span”更改為“ divs”，因為當需要內聯元素時使用“ span”，而在需要塊元素時使用“ div”。

https://jsfiddle.net/scorpio777/rd9sqwuo/10/

<style>
.block1 {
    width: 96%;
    box-shadow: 2px 2px 2px #d1d1d1;
   /* margin-bottom: 25px;*/
    margin-left: 10px;
}

.head-block-1 {
    width: auto;
    background-color: #f6f6f6;
    padding: 15px;
    border: 1px solid #d1d1d1;
}

.content-block-1 {
    width: auto;
    border: 1px solid #d1d1d1;
    padding: 15px;
    min-height:55px;
}

.data-block-left {
    width: 10%;
    float: left;
    display:inline-block;
}
.data-block-middle {
    width: 45%; 
    float: left;
    text-align: left;
    display:inline-block;
}
.data-block-right {
    width: 45%; 
    float: right;
    text-align:right;
    display:inline-block;
}
span {display:block;}
</style>

<div class="block1">
      <div class="head-block-1">
         Best Selling Tickets
      </div>
      <div class="content-block-1">
          <div class="data-block-left">
              <img src="/nutickets2/images/circle.png">
          </div>
          <div class="data-block-middle">
              <span>
              Adult - General<br>
              TEST TEST</span>
          </div>
          <div class="data-block-right">
               <span>
               50 sold since Jan 17 <br>
               20% more sold than last period
               </span>
           </div>
        </div>
</div>