解决方案

Question

如上图所示我需要这样的布局。 DIV1包含静态文本和来自其他文件（EX.JSON）的DIV2数据（文本），因此它是可变的。关键在于根据更高的div的高度保持两个div总是具有相同的高度。

注意：我不希望float。

图片提供：我在线测试之一。

Answer 1

您好

您可以使用CSS3 Flexbox轻松完成此操作。

解决方案

这是带有工作示例的代码段。我在代码中的注释中使用了Flexbox和detalils。

＆＃13;

#main {
  /*Styles for sample presentation*/
  padding: 20px;
  border: 1px solid tomato;
}

#wrapper {
  display: flex;
  flex-flow: row wrap;
  /* The remaining place (horizontaly) will be spread out around divs in wrapper. */
  justify-content: space-around;
  
  /*Styles for sample presentation*/
  border: 1px solid royalblue;
}

#wrapper>header {
  /* To keep header 100% width. */
  flex: 0 0 100%;
  text-align: center;
  
  /*Styles for sample presentation*/
  background-color: sandybrown;
}

#wrapper>div {
  margin: 10px;
  padding: 20px;
  /* To center the text vertically. */
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  
  /*Styles for sample presentation*/
  border: 1px solid maroon;
  text-align: justify;
}

#text-static {
  /*Low flex basis values to keep it next to each other divs*/
  flex: 1 0 30%;
}

#wrapper>div#text-json {
  /*Low flex basis values to keep it next to each other divs*/
  flex: 0 0 25%;
  margin-left: 0;
}

＆＃13;

<div id="main">
  <div id="wrapper">
    <header>
      Sample header
    </header>
    <div id="text-static">
      Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym,
      pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji
      druków na komputerach osobistych, jak Aldus PageMaker
    </div>
    <div id="text-json">
      a Lorem Ipsum a Lorem Ipsum a Lorem Ipsum
    </div>
  </div>
</div>

＆＃13;

如果你想尝试使用右侧div比剩下的文字多的情况，你可以编辑上面there的相同代码段。

知识

有关CSS3 Flexbox的更多信息，例如：在this W3Schools网站上。

我最近找到的一个很好的学习工具flexboxfroggy.com。

希望这很有用。

干杯

Answer 2

这是我使用 CSS网格的实现，在我看来，这使得这更容易，尤其是在使用布局时。我正在使用SASS进行造型。我希望这有帮助。以下是codepen.io

上的代码段链接

HTML CODE

<div class="main-div">
  <div class="wrapper-div">
    <div class="sample-header">Header</div>
    <div class="div1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta blanditiis, error dolorem, velit tempora, magni ea officiis itaque voluptates aliquid consectetur deserunt quisquam tenetur dolor! Labore assumenda iusto debitis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, velit cumque quaerat optio vero sed dolores maxime dolorum aut itaque? Asperiores, esse. Nihil dignissimos nisi debitis molestiae facilis accusamus non! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto quisquam corrupti error nesciunt pariatur quidem, voluptates similique obcaecati magni aperiam autem aliquam ex, ducimus, distinctio amet labore vel blanditiis sapiente. </div>
    <div class="div2">Little bit of text here </div>
  </div>
</div>

使用CSS GRID的CSS样式

.main-div{

  border:1px solid #000;
  width:500px;
  margin:0 auto;
  padding:10px;

   .wrapper-div{
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 3fr 1fr;
      background-color: #fff;
     // align-items:center;
      color: #444;
     margin:10px 0;

    .sample-header {
        grid-column: 1 / 3;
        grid-row: 1;
        background-color:lightgrey;
        padding:10px;
        text-align:center;
     }

     .div1,.div2{
       border:1px solid #000;
       padding:10px;
       display:grid;
       align-items:center;
     }

    .div1 {
        grid-column: 1 ;
        grid-row: 2 ;
    }

    .div2 {
        grid-column: 2;
        grid-row: 2;

    }
  }
}

Answer 3

https://codepen.io/anon/pen/OQZNgX

在Div 1＆amp;的容器上Div 2应用此CSS

display: flex;
justify-content: center;

然后在子div上，使用flex-basis指定宽度

flex-basis: 75%;
/* and / or */
flex-basis: 25%;

请参阅上面的代码笔链接以获得有效的演示！

Answer 4

您可以使用bootstrap来实现此目的......您可以在下面看到此类设计的代码。

<div class='container'>
     <div class='col-md-12 customHeaderclass'>
              Your header
     </div>
     <div class='row'>
              <div class='col-md-8'>
                     Your big content
              </div>
              <div class='col-md-4'>
                     Your small content
              </div>
     </div>
</div>

我希望这段代码可以帮到你谢谢＆amp;问候。

两列，一个标题布局与CSS3 Flexbox

4 个答案:

您好

解决方案

知识

干杯