在html中設計兩列布局

Question

如何設計如下所示的佈局。第一列的文本在第二列繼續。

頁面佈局

我知道這是一個很小白的問題，但即使想了很多，我沒有得到它之後。

Answer 1

可以使用CSS columns做到這一點：

.layout{ 
 
\t columns: 2; 
 
}

<div class="layout"> 
 
\t <p>Ipsum ipsam iusto necessitatibus odio quas pariatur molestiae, omnis veritatis consectetur magni ducimus ullam nisi nam, dicta quo exercitationem illo dolorum at tempora sed. Voluptatem laudantium veritatis, voluptate fuga doloremque.</p> 
 
\t <p>Saepe excepturi nam odit at, voluptas nostrum, porro pariatur illo facere temporibus ad non nesciunt, possimus mollitia, dolore id dicta vitae aliquid dolorum eveniet ipsa doloremque explicabo praesentium quod! Deserunt!</p> 
 
</div>

Answer 2

您可以使用column-count這一點。

div { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
}

<div> 
 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec risus iaculis, viverra quam vel, lacinia mi. Suspendisse ornare dolor arcu, et cursus nunc condimentum id. Aenean imperdiet urna a elit pretium, ac rhoncus libero lacinia. Nulla tempus, ante ac aliquam sollicitudin, est risus congue lacus, in molestie tortor lectus quis massa. Aliquam quis tellus tellus. Aenean neque diam, aliquet et diam sed, vestibulum egestas tortor. Duis at sapien eros. Duis gravida ullamcorper augue, a porttitor sapien convallis vitae. Vestibulum rutrum, mauris a laoreet malesuada, orci metus scelerisque ipsum, sit amet mattis elit urna eget ex. Ut sit amet blandit elit, ac consequat justo. 
 

 
Mauris quis lorem quam. Vivamus consequat convallis tortor, in viverra ipsum feugiat placerat. Donec nec velit tincidunt, posuere eros ac, placerat lorem. Donec gravida tristique ligula, eget accumsan dui convallis euismod. Proin ullamcorper felis sem, id porta velit cursus non. Duis in magna risus. Donec id massa sed justo faucibus fringilla. Quisque posuere nisi eget rutrum viverra. Pellentesque orci dui, eleifend et sodales nec, scelerisque consequat odio. Donec vel lacus suscipit, molestie ipsum ac, vulputate mi. 
 

 
Morbi porttitor lorem ac magna bibendum lobortis euismod vitae est. Proin eu semper libero. Pellentesque turpis velit, pharetra sed odio ac, pharetra eleifend dui. Vivamus lacinia purus elit, nec sodales velit blandit vel. Mauris posuere at enim id malesuada. Pellentesque viverra ante at odio euismod dictum. Quisque non ullamcorper augue, eu hendrerit lorem. Donec malesuada nisi quis condimentum congue. Sed eget leo eget tortor lacinia sagittis. 
 

 
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam posuere interdum elit in luctus. Sed pulvinar faucibus velit, non eleifend diam efficitur in. Maecenas tristique justo ante, congue porttitor enim tempus in. Ut rhoncus vehicula tellus consectetur congue. Nulla aliquet lorem id tellus pharetra malesuada. Praesent a arcu sed velit malesuada fermentum eget vitae urna. Curabitur rhoncus, augue at ullamcorper semper, nisi urna tempor risus, nec vestibulum sapien nunc at risus. Pellentesque luctus scelerisque mi, quis lacinia tellus pharetra tincidunt. Pellentesque eu eros posuere, tempus enim eget, fermentum lacus. Suspendisse sit amet odio at justo porttitor ultrices. 
 

 
Vivamus nec augue eleifend, condimentum lectus id, dapibus tellus. In hac habitasse platea dictumst. Vestibulum pretium consectetur mauris nec vestibulum. Praesent nec nibh velit. Fusce fermentum, lacus in posuere tincidunt, erat nulla finibus leo, et venenatis dui sem non neque. Vestibulum laoreet ornare dui eu eleifend. Etiam eleifend molestie dapibus. Nulla vitae purus est. </div>