我怎样才能让这个div的一部分彼此相邻？

Code and preview: what i have http://img78.imageshack.us/img78/9795/previewec9.gif

代码和预览:我有什么http://img78.imageshack.us/img78/9795/previewec9.gif

<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
    font-size:205%
}
.dMon {
    font-weight:bold;
    font-variant:small-caps;
    font-size:130%;
    margin-top:-.7em;
}
.detailContainer {
    vertical-align:middle;
    display:table-cell;
    padding:0em 0em 0em 1em;
}
#dContainer {
    border:1px solid green;
    display:table;
    height:3.25em;
    }
</style>
<body>
<div id="dContainer">
    <div class="dDay">31</div>
    <div class="dMon">sep</div>
    <div class="detailContainer">Test O.O</div>
</div>
</body>
</html>

My question is: is it possible to place another date section next to the first one, so it appears like this: what i want http://img505.imageshack.us/img505/2787/previewsp2.gif

我的问题是:是否可以在第一个旁边放置另一个日期部分,所以它看起来像这样:我想要什么http://img505.imageshack.us/img505/2787/previewsp2.gif

EDIT: strange, I tried floating before I asked the question and it didn't work...thanks everyone :D

6 个解决方案

#1

<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
    font-size:205%
}
.dMon {
    font-weight:bold;
    font-variant:small-caps;
    font-size:130%;
    margin-top:-.7em;
}
.detailContainer {
    vertical-align:middle;
    display:table-cell;
    padding:0em 0em 0em 1em;
}
#dContainer, #dContainer2 {
    border:1px solid green;
    display:table;
    height:3.25em;
    float: left;
    }
</style>
<body>
<div id="dContainer">
    <div class="dDay">31</div>
    <div class="dMon">sep</div>
</div>
<div id="dContainer2">
    <div class="dDay">31</div>
    <div class="dMon">sep</div>
    <div class="detailContainer">Test O.O</div>
</div>
</body>
</html>

#2

use style="float:left" on each DIV (either directly or via a stylesheet)

在每个DIV上使用style =“float:left”(直接或通过样式表)

#3

float:left if you want block elements to sit next to each other.

float:如果你想让块元素彼此相邻,则为left。

#4

Copy dContainer and place the copy immediately after it.

复制dContainer并在其后立即放置副本。

Change the ID and the new ID to the #dContainer style.

将ID和新ID更改为#dContainer样式。

Add a new CSS block that has just #dContainer (not the new div) and put "float:left;" in the block.

添加一个只有#dContainer(而不是新div)的新CSS块并放入“float:left;”在街区。

#5

<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
    font-size:205%
}
.dMon {
    font-weight:bold;
    font-variant:small-caps;
    font-size:130%;
    margin-top:-.7em;
}
.dDate {
    display:table-cell;
}
.detailContainer {
    vertical-align:middle;
    display:table-cell;
    padding-left:1em;
}
#dContainer {
    border:1px solid green;
    display:table;
    height:3.25em;
}
</style>
<body>
<div id="dContainer">
    <div class="dDate">
        <div class="dDay">31</div>
        <div class="dMon">sep</div>
    </div>
    <div class="dDate">
        <div class="dDay">31</div>
        <div class="dMon">sep</div>
    </div>
    <div class="detailContainer">Test O.O</div>
</div>
</body>
</html>

[EDIT] Looking at the other answers:
- Float is of course the right answer, I just went with the initial logic, actually finishing it (making a real table might be actually the logical final step...)
- Note: doesn't look nice in IE (6, 7).

[编辑]看看其他答案: - Float当然是正确的答案,我只是按照初始逻辑,实际完成它(制作一个真正的表可能实际上是合乎逻辑的最后一步......) - 注意:没有在IE中看起来不错(6,7)。

#6

Is there any reason why you can't use <span> tags instead of <div>'s? That way your page would still make sense when read without CSS.

是否有任何理由不能使用标签而不是

?这样,在没有CSS的情况下读取页面仍然有意义。

#1

<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
    font-size:205%
}
.dMon {
    font-weight:bold;
    font-variant:small-caps;
    font-size:130%;
    margin-top:-.7em;
}
.detailContainer {
    vertical-align:middle;
    display:table-cell;
    padding:0em 0em 0em 1em;
}
#dContainer, #dContainer2 {
    border:1px solid green;
    display:table;
    height:3.25em;
    float: left;
    }
</style>
<body>
<div id="dContainer">
    <div class="dDay">31</div>
    <div class="dMon">sep</div>
</div>
<div id="dContainer2">
    <div class="dDay">31</div>
    <div class="dMon">sep</div>
    <div class="detailContainer">Test O.O</div>
</div>
</body>
</html>

#2