浮动不能正常工作

时间:2015-06-22 15:57:35

标签: html css

我的代码有问题。为什么.right_content属于.left_content? 它们都有浮动:left和.right_content文本应该适应屏幕宽度......

.content {
  clear: both;
  margin-bottom: 50px;
  width: 100%;
}
.right_content {
  float: left;
  max-width: 600px;
}

.left_content {
  background: blue;
  float: left;
  width: 250px;
  height: 400px;
}
<div class="content">

  <div class="left_content">
  </div>

  <div class="right_content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
    nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
    dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
  </div>



</div>

4 个答案:

答案 0 :(得分:0)

正确的内容在您的情况下有全宽。试着给它一个宽度!

&#13;
&#13;
.content {
  clear: both;
  margin-bottom: 50px;
  width: 100%;
}
.right_content {
  float: left;
  width: 350px;
}

.left_content {
  background: blue;
  float: left;
  width: 250px;
  height: 400px;
}
&#13;
<div class="content">

  <div class="left_content">
  </div>

  <div class="right_content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
    nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
    dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
  </div>



</div>
&#13;
&#13;
&#13;

提示:如果您使用的是固定宽度+可变宽度,则不是这种方法。使用此:

&#13;
&#13;
.parent {padding-left: 100px; position: relative;}
.fixed {width: 90px; left: 5px; background: #fcc; position: absolute;}
.variable {background: #ccf;}
&#13;
<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="variable">Variable</div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

.right_content没有宽度。尝试添加width:calc(100% - 250px)

&#13;
&#13;
.content {
  clear: both;
  margin-bottom: 50px;
  width: 100%;
  overflow:auto;
}
.right_content {
  float: left;
  width:calc(100% - 250px)
}

.left_content {
  background: blue;
  float: left;
  width: 250px;
  height: 400px;
}
&#13;
<div class="content">

  <div class="left_content">
  </div>

  <div class="right_content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
    nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
    dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
  </div>



</div>
&#13;
&#13;
&#13;

另一种方法是忘记浮动并使用tabletable-cell。这也为您提供了更好的浏览器兼容性。

&#13;
&#13;
.content {
  clear: both;
  margin-bottom: 50px;
  width: 100%;
  display:table;
}

 .content> div{
   display:table-cell;
   vertical-align:top;
 }
 
.left_content {
  background: blue;
  width: 250px;
  height: 400px;
}
&#13;
<div class="content">

  <div class="left_content">
  </div>

  <div class="right_content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
    nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
    dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
  </div>



</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

尝试在左右内容div上使用百分比宽度:https://jsfiddle.net/cucgc5qh/

<div class="content">
    <div class="left_content"></div>
    <div class="right_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus, nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.</div>
</div>

.content {
    clear: both;
    margin-bottom: 50px;
    width: 100%;
}
.right_content {
    float: left;
    width: 50%;
}
.left_content {
    background: blue;
    float: left;
    width: 50%;
    height: 400px;
}

答案 3 :(得分:0)

只是不要浮动正确的元素:

.content {
  overflow: hidden;
  margin-bottom: 50px;
  width: 100%;
}
.right_content {
  max-width: 600px;
}
.left_content {
  background: blue;
  float: left;
  width: 250px;
  height: 400px;
}
<div class="content">
  <div class="left_content"></div>
  <div class="right_content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
    nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
    dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
  </div>
</div>

相关问题