Question

我有 2列布局，其中内容流畅，而右侧边栏有固定宽度。

在下面的例子中，我也使用了Bootstrap，主要是出于审美原因：

.fluid-fixed {
  position: relative;
}

.content-wrapper {
  float: left;
  width: 100%;
}

.content,
.sidebar {
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 10px;
}

.content {
  margin-right: 342px;
  clear: both;
  overflow: auto;
}

.sidebar {
  position: relative;
  width: 322px;
  margin-left: -322px;
  float: right;
  overflow: hidden;
  background: #fff;
}

main p {
  text-align: justify;
}

main .img-thumbnail.float-left {
  margin-right: 10px;
}

@media only screen and (max-width: 768px) {
  .container {
    max-width: 100%;
  }
  .sidebar {
    display: none;
  }
  .content {
    margin-right: 0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container fluid-fixed">
  <div class="content-wrapper">
    <main class="content">
      <h2>Lorem ipsum dolor sit consectetur adipisicing elit</h2>
      <p><img src="//lorempixel.com/200/150" class="img-thumbnail float-left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic esse quo, dolorum officia placeat, earum eveniet ipsum? Asperiores magnam laboriosam autem quis, voluptatem eos
        explicabo enim quo inventore dolorem modi!</p>
      <p>Cupiditate dicta distinctio tempore reiciendis ut? Blanditiis cumque officiis, eius mollitia, ut voluptates incidunt asperiores, vel, ratione adipisci tempora harum. Cum quas ratione animi culpa ipsum quasi eaque architecto tempore!</p>
      <p>Vero ullam voluptate quis itaque assumenda a, culpa necessitatibus illo! Porro dignissimos, quidem velit odio laudantium quia excepturi fuga harum veritatis sapiente saepe exercitationem animi eos, at a quaerat praesentium.</p>
      <p>Velit asperiores dolorum, saepe iusto, dolor quisquam quaerat numquam ab nesciunt dignissimos ad exercitationem veritatis, repudiandae accusantium placeat nostrum similique quas! Iste labore iusto incidunt a fuga ducimus dolores laudantium.</p>
      <p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
    </main>
  </div>
  <aside class="sidebar">
    <p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
  </aside>
</div>

我无法实现的是使2列高度相等。将height: 100%;添加到侧边栏不起作用。

缺少什么？

Answer 1

Flexbox可以做到这一点：

.fluid-fixed {
  display: flex;
}

.content,
.sidebar {
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 10px;
}

.content {
  clear: both;
  overflow: auto;
}

.sidebar {
  overflow: hidden;
  background: #fff;
}

.sidebar img {
  max-width: 100%;
}

main p {
  text-align: justify;
}

main .img-thumbnail.float-left {
  margin-right: 10px;
}

@media only screen and (max-width: 768px) {
  .container {
    max-width: 100%;
  }
  .sidebar {
    display: none;
  }
  .content {
    margin-right: 0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container fluid-fixed">
  <div class="content-wrapper">
    <main class="content">
      <h2>Lorem ipsum dolor sit consectetur adipisicing elit</h2>
      <p><img src="//lorempixel.com/200/150" class="img-thumbnail float-left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic esse quo, dolorum officia placeat, earum eveniet ipsum? Asperiores magnam laboriosam autem quis, voluptatem eos
        explicabo enim quo inventore dolorem modi!</p>
      <p>Cupiditate dicta distinctio tempore reiciendis ut? Blanditiis cumque officiis, eius mollitia, ut voluptates incidunt asperiores, vel, ratione adipisci tempora harum. Cum quas ratione animi culpa ipsum quasi eaque architecto tempore!</p>
      <p>Vero ullam voluptate quis itaque assumenda a, culpa necessitatibus illo! Porro dignissimos, quidem velit odio laudantium quia excepturi fuga harum veritatis sapiente saepe exercitationem animi eos, at a quaerat praesentium.</p>
      <p>Velit asperiores dolorum, saepe iusto, dolor quisquam quaerat numquam ab nesciunt dignissimos ad exercitationem veritatis, repudiandae accusantium placeat nostrum similique quas! Iste labore iusto incidunt a fuga ducimus dolores laudantium.</p>
      <p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
    </main>
  </div>
  <aside class="sidebar">
    <img src="https://ppc.news/wp-content/uploads/2017/08/Medium-Rectangle-300x250.jpg" alt="banner">
  </aside>
</div>

Answer 2

您不需要额外的<cfscript> function TestNum(required numeric myID) { return myID; } writeoutput(TestNum(8.3)); </cfscript>课程。对.fixed-fluid使用Bootstrap 4 d-flex类。

display: flex;

https://www.codeply.com/go/rplszaWQRF

Answer 3

使用display: flex;代替position: relative; <div class="container fluid-fixed">元素完成了这项工作。

.fluid-fixed {
  display: flex;
}

.content-wrapper {
  width: 100%;
}

.content,
.sidebar {
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 10px;
}

.content {
  margin-right: 342px;
  clear: both;
  overflow: auto;
}

.sidebar {
  width: 322px;
  margin-left: -322px;
  float: right;
  overflow: hidden;
  background: #fff;
}

main p {
  text-align: justify;
}

main .img-thumbnail.float-left {
  margin-right: 10px;
}

@media only screen and (min-width: 1280px) {
    max-width: 1200px !important;
}

@media only screen and (max-width: 768px) {
  .container {
    max-width: 100%;
  }
  .sidebar {
    display: none;
  }
  .content {
    margin-right: 0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container fluid-fixed">
  <div class="content-wrapper">
    <main class="content">
      <h2>Lorem ipsum dolor sit consectetur adipisicing elit</h2>
      <p><img src="//lorempixel.com/200/150" class="img-thumbnail float-left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic esse quo, dolorum officia placeat, earum eveniet ipsum? Asperiores magnam laboriosam autem quis, voluptatem eos
        explicabo enim quo inventore dolorem modi!</p>
      <p>Cupiditate dicta distinctio tempore reiciendis ut? Blanditiis cumque officiis, eius mollitia, ut voluptates incidunt asperiores, vel, ratione adipisci tempora harum. Cum quas ratione animi culpa ipsum quasi eaque architecto tempore!</p>
      <p>Vero ullam voluptate quis itaque assumenda a, culpa necessitatibus illo! Porro dignissimos, quidem velit odio laudantium quia excepturi fuga harum veritatis sapiente saepe exercitationem animi eos, at a quaerat praesentium.</p>
      <p>Velit asperiores dolorum, saepe iusto, dolor quisquam quaerat numquam ab nesciunt dignissimos ad exercitationem veritatis, repudiandae accusantium placeat nostrum similique quas! Iste labore iusto incidunt a fuga ducimus dolores laudantium.</p>
      <p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
    </main>
  </div>
  <aside class="sidebar">
    <img src="https://ppc.news/wp-content/uploads/2017/08/Medium-Rectangle-300x250.jpg" alt="banner">
  </aside>
</div>

CSS布局：使流体左列和固定右列的高度相等

3 个答案: