Question

代码和预览： what i have

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

我的问题是：是否可以在第一个旁边放置另一个日期部分，因此它看起来像这样：what i want http://img505.imageshack.us/img505/2787/previewsp2.gif

<小时/> 编辑：很奇怪，在我问这个问题之前我试过漂浮它并没有用......谢谢大家：D

Answer 1

在每个DIV上使用style =“float：left”（直接或通过样式表）

Answer 2

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

Answer 3

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

Answer 4

复制dContainer并将副本放在其后面。
将ID和新ID更改为#dContainer样式。
添加一个只有#dContainer（而不是新div）的新CSS块并放入“float：left;”在街区。

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

[编辑]看其他答案：
- 浮动当然是正确的答案，我只是按照初始逻辑，实际完成它（制作一个真正的表可能实际上是合乎逻辑的最后一步......）
- 注意：在IE中看起来不太好（6,7）。

Answer 6

你有什么理由不能使用＆lt; span＆gt;标签而不是＆lt; div＆gt;的？这样，在没有CSS的情况下阅读时，您的页面仍然有意义。

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

6 个答案: