Question

我希望我的第二列的文本与第一列的第一段（Lorem Ipsum文本）处于同一级别。可能吗？目前它开始与我的H2文本相同的水平，看起来不太好。谢谢 http://jsfiddle.net/Grek/znD9f/

enter image description here

<div class="article twocolumns">
    <h2>Biography</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p><strong>LOREM IPSUM</strong></p>
</div>

CSS：

.twocolumns {
    -webkit-column-count: 2; /* Safari and Chrome */
       -moz-column-count: 2; /* Firefox */
            column-count: 2;
}
.article {
    float: right;
    width: 400px;
    padding: 60px 82px 49px 82px;
    position: relative;
    z-index: 15;
    margin-top: 90px;
    background: #fff;/* max-width: 23.5%; */
}
.article h1, .article h2 {
    margin-top: -4px;
    padding-bottom: 2px;
}

Answer 1

在这种情况下，您需要使用.twocolumns类来分隔没有您的标题，即像这样的h2元素

<div class="article">
    <h2>Biography</h2>
    <div class="twocolumns">
  <p>Lorem ipsum dolor sit amet,....

并重置margin元素的默认padding和p，以使其更加清晰。

p
{
    margin:0;
    padding:0;
}

所以基本上将.twocolumns类应用于那些要分成两列的元素。在你的情况下，你不希望有标题。所以将它从那里排除并放在外面。

JS Fiddle

Answer 2

Firefox尚不支持，但以下内容适用于Chrome，Safari，Opera 11.1+和IE10：

.article h1, .article h2 {
    -webkit-column-span: all;
    column-span: all;
}

有关详细信息：https://developer.mozilla.org/en-US/docs/CSS/column-span。

以下是进一步的信息：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/an-introduction-to-the-css3-multiple-column-layout-module/。

直到这有更广泛的浏览器支持，只需将标题移到.twocolumns div。

之外

Answer 3

将H2标签移到该div之外怎么样？ http://jsfiddle.net/enigmarm/znD9f/4/

按一下CSS按照你想要的方式进行操作。

<h2 class="article">Biography</h2>
<div class="article twocolumns">

Answer 4

有可能，看看这个改变的小提琴：http://jsfiddle.net/znD9f/2/

通过将h2移出并将段落包装在两列中来稍微调整HTML。

<div class="article">
  <h2>Biography</h2>
  <div class="twocolumns">
    <p> ... <p>
    ...
  </div>
</div>

稍微调整CSS以对齐两列：

.article p {
    margin-top: 3px;   
}

我希望能解决你的问题。它至少适用于你的例子。

对齐2列文本

4 个答案: