Question

试图让这些div彼此相邻。

HTML：

<div class="container">
    <div class="info">
        <h3>What?</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue hendrerit sem, et malesuada nibh. Curabitur non ultrices sapien. Curabitur sed adipiscing elit. Nulla diam lorem, luctus nec mauris non, malesuada dignissim velit. Suspendisse lacinia blandit arcu ac pharetra. Praesent vitae sodales turpis. Nam nibh quam, tempor vitae accumsan vitae.</p>
        <h3>Where?</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue hendrerit sem, et malesuada nibh. Curabitur non ultrices sapien. Curabitur sed adipiscing elit. Nulla diam lorem, luctus nec mauris non, malesuada dignissim velit. Suspendisse lacinia blandit arcu ac pharetra. Praesent vitae sodales turpis. Nam nibh quam, tempor vitae accumsan vitae.</p>
        <h3>Why?</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue hendrerit sem, et malesuada nibh. Curabitur non ultrices sapien. Curabitur sed adipiscing elit. Nulla diam lorem, luctus nec mauris non, malesuada dignissim velit. Suspendisse lacinia blandit arcu ac pharetra. Praesent vitae sodales turpis. Nam nibh quam, tempor vitae accumsan vitae.</p>
    </div>
    <div class="schedule">
        SCHEDULE OF EVENTS
    </div>
</div>

CSS：

.container {
   width: 85%;
   margin: 0 auto;
}
.info {
   width: 70%;
}
.schedule {
   width: 30%;
}

JSFIDDLE

Answer 1

首先，元素显示为块。这意味着他们不会内联。其次，因为隐藏了＆＃39;在你的元素之间的空间，总宽度> 100％（如果你检查你应该看到一个文本节点，其中有一个空格，这个文本节点有一个宽度）。有2个修复此问题。

1）在两个元素上设置display：inline-block。然后，不要在/ div和div之间放置换行符和制表符。请参阅this fiddle。

.info {
  width: 70%;
  display:inline-block;
}
.schedule {
  width: 30%;
  display:inline-block;
}

</div><div class="schedule">

2）在两个元素上设置float-left。这样，就没有隐藏的空间。请参阅this fiddle。

.info {
  width: 70%;
  float:left;
}
.schedule {
  width: 30%;
  float:left;
}

Answer 2

div信息必须单独包装在一个容器中，使它们具有一起采用的宽度

.container {
   width: 100%;
   margin: 0 auto;
}
.info {
   width: 30%;
   float:left;

}

喜欢小提琴

FIDDLE

div不嵌套

2 个答案: