如何填充内容宽度

时间：2018-10-11 01:38:18

标签： html css

我在填充父母的宽度时遇到问题：

.slider {
  max-width: 575px;
  width: 575px;
  height: 250px;
  background: #e6e6e6;
  float: left;
}

.info {
  float: left;
  width: calc(100% - 575px);
}
<div class="parent">
  <div class="slider">
    Here is some images
  </div>
  <div class="info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
  </div>
</div>

我真正想要的是

enter image description here

1 个答案:

答案 0 :(得分：0)

只需从float: left;中删除.info：

.info {
  width: calc(100% - 575px);
}


.slider {
  max-width: 575px;
  width: 575px;
  height: 250px;
  background: #e6e6e6;
  float: left;
}

.info {
  width: calc(100% - 575px);
}
<div class="parent">
  <div class="slider">
    Here is some images
  </div>
  <div class="info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
  </div>
</div>

相关问题
最新问题