0

I am trying to make my divs appear horizontally across the page but there is an automatic line break in between them. I was wondering how I could fix this.

<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>
4

3 回答 3

4

这是块级元素的默认行为.. 有很多选项可以让两个 div 并排显示，但一种简单的方法是使用该float属性并为每个 div 赋予宽度50%

例子

于 2013-03-31T23:46:05.047 回答
0

这可以很容易地通过引入一个类或使用一些特殊技巧来实现。如果你使用display: inline-block你可以实现你所追求的。因此，假设您向您的 ID 介绍了一个课程#box1，#box2理论上您可以...

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

#box1在使用 inline-block 来关闭关闭</div>和#box2打开之间的任何标记间隙时，请务必记住<div>。否则，您将留下 3 或 4 个不需要的像素。

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

于 2013-07-03T19:53:07.160 回答
0

您可以绝对定位它们：

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

#box1 {
  left: 0;
}

#box2 {
  right: 0;
}
于 2013-03-31T23:45:44.487 回答