css - CSS using

Question

I am using <div> to create a horizontal bar across the screen. Within that horizontal bar, I have 3 more <div> each of a different width. They are supposed to be all in a row horizontally next to each other. Instead, they are on top of each other. How do I fix this?

Also, if I don't have any text within the <div> in my HTML code, the <div> does not appear. Ex: <div>anything</div>

JSFiddle

Answer 1

只需使用一个浮动，它是跨浏览器兼容的。此外，您应该清除可以在更新的JsFiddle上看到的浮动

.horizon div{
    float: left;
}

Answer 2

小提琴

您可以浮动那些内部 DIV。您也可以使用inline-block（未​​显示）。

<div class="horizon">
    <div class="left">left</div>
    <div class="mid">middle</div>
    <div class="right">right</div>
    <br style="clear: both" />
</div>

body {
    margin: 0;
}
.horizon {
    background: #000000;
    width: 100%;
}

div.horizon div {
    float: left;
}

.right {
    width: 25%;
    background: #ff0000;
}
.mid {
    width: 50%;
    background: #00ff00;
}
.left {
width: 25%;
    background: #0000ff;
}

Answer 3

您可以将 css float:left 添加到 div，如果您也不想在 div 中添加任何文本，则应将 css height 添加到 div。

.horizon div{
    float: left;
    height: 20px;
}

像这样http://jsfiddle.net/KG5B3/