Question

我试图让我的div在页面上水平显示，但它们之间有一个自动换行符。我想知道如何解决这个问题。

<div id="box1">
    <header id="whyshouldi">
    What is iOS Development
    </header>
    <p id="whatis">
        iOS Development is the process used to create native applications for iPhone, iPod, and iPad. Applications are made using the SDK(software development kit), Xcode. Aside from the software, it is necessary that iOS Developers know Objective-C.
    </p>
</div>

        <div id="box2">
        <header id="whyshouldi">
    Why Should I learn it?
        </header>
    <p id="whatis">
Learning native app development can allow you to better expand the horizon of knowledge in iPhone, and can make you a better programmer overall. It is a great skill to know no matter who you are.
    </p>
</div>

Answer 1

这是block-level elements的默认行为..有两个选项可以让两个div并排显示，但一种简单的方法是使用float属性并为每个div赋予宽度50%

Example

Answer 2

你可以绝对定位它们：

#box1,#box2 {
  position: absolute;
  width: 50%;
}

#box1 {
  left: 0;
}

#box2 {
  right: 0;
}

Answer 3

这可以非常容易地实现引入类或使用一些特异性技巧。如果您使用display: inline-block，您可以实现您所追求的目标。所以，假设您在理论上为#box1和#box2 ID引入了一个课程......

.col { display: inline-block; max-width: 170px; width: 100%; vertical-align: top; }

始终记住，使用内嵌块来关闭#box1关闭</div>和#box2开放<div>之间的标记中的任何间隙。否则，您将留下3或4个不需要的像素。

检查这个小提琴。我想这就是你所追求的。 http://jsfiddle.net/UsNBj/

当它们不应该分开时，它们与换行符分开

3 个答案: