Как я могу получить раздел этого div, чтобы сидеть рядом друг с другом? - PullRequest
Новая
       13

Как я могу получить раздел этого div, чтобы сидеть рядом друг с другом?

0 голосов
/ 08 октября 2008

Код и предварительный просмотр: 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>

Мой вопрос: возможно ли разместить другой раздел с датами рядом с первым, поэтому он выглядит так: что я хочу http://img505.imageshack.us/img505/2787/previewsp2.gif

РЕДАКТИРОВАТЬ: странно, я пытался плавать, прежде чем я задал вопрос, и это не сработало ... спасибо всем: D

Ответы [ 6 ]

3 голосов
/ 08 октября 2008

use style = "float: left" на каждом DIV (напрямую или через таблицу стилей)

2 голосов
/ 08 октября 2008 
<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>
1 голос
/ 08 октября 2008

float: left, если вы хотите, чтобы блочные элементы сидели рядом друг с другом.

0 голосов
/ 09 октября 2008

Есть ли причина, по которой вы не можете использовать теги вместо ? Таким образом, ваша страница будет иметь смысл при чтении без CSS.

0 голосов
/ 08 октября 2008 
<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>

[ПРАВИТЬ] Глядя на другие ответы:
- Float, конечно, правильный ответ, я просто пошел с начальной логикой, фактически заканчивая ее (создание реальной таблицы могло бы быть логическим последним шагом ...) - Примечание: в IE не выглядит красиво (6, 7).

0 голосов
/ 08 октября 2008
  1. Скопируйте dContainer и поместите копию сразу после нее.
  2. Измените идентификатор и новый идентификатор на стиль #dContainer.
  3. Добавьте новый блок CSS, в котором есть только #dContainer (не новый div) и поставьте «float: left;» в блоке.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...