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。

父元素永远不会扩展为包含浮动子元素。因此，为了让他们这样做，你需要告诉父母，溢出容器的元素应该自动扩展以包含它们。

还有其他方法可以做到这一点，但这是最简单的方法。搜索＆＃34;清除浮动＆＃34;

Answer 2

使用Floats使父元素折叠其高度。为了保持其高度，我们需要清除浮子。因此，最好的方法是在浮动元素的底部添加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而不是浮点数。 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

你的班级＆＃34; data-block1＆＃34;是33％，相等于每个＆＃34; span＆＃34;。所以，如果你想获得第二个＆＃34; span＆＃34;离左边更近，你需要改变左边的宽度＆＃34; span＆＃34;。我已经改变了＆＃34; span＆＃34; to＆＃34; divs＆＃34;，因为＆＃34; span＆＃34;当你需要内联元素和＆＃34; div＆＃34;在需要块元素时使用。

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>

使用浮动左CSS安排SPAN和DIV

4 个答案: