使用浮动左 CSS 排列 SPAN 和 DIV

debugcn 发表于 Dev

崩溃

我试图将我的跨度安排在一个带有左浮动的 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;
}

丹妮拉B67

“data-block1”的类是 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。