Используя CSS, как я могу сложить два промежутка между двумя плавающими div? - PullRequest
Новая
       14

Используя CSS, как я могу сложить два промежутка между двумя плавающими div?

0 голосов
/ 08 июня 2011

В верхней части страницы у меня есть два элемента, один всплыл слева, а другой справа. Я могу поместить текст с границей между ними, однако теперь мне нужно поместить две такие области текста между ними.

Вот Скрипка, иллюстрирующая мою проблему: http://jsfiddle.net/TcRxp/

Мне нужна оранжевая коробка под зеленой рамкой, каждый центр которой выровнен с другим. «Легенда» (всплывающая справа) раньше была на том же уровне, но теперь смещена вниз.

Я пытался добавить еще одну таблицу в микс, но это не помогло.

Извините, разметка - я знаю, что это не очень удобно. Несколько человек коснулись этого с течением времени, и никто из нас не является гуру в этом.

И да, я лоббировал, чтобы дизайнер был добавлен в команду, но этого еще не произошло.

Спасибо

Пол

Ответы [ 5 ]

1 голос
/ 08 июня 2011

Всегда будет сложно получить желаемые результаты, когда вы комбинируете CSS и таблицы для макета.

Я бы предложил упростить ваш HTML: 

<div id="headleft">a little search form here</div>
<div id="headmiddle">
    <div class="active"><strong>Status:</strong> Active</div>
    <div class="search">Search results displayed</div>
</div>
<div id="headright">
    <dl>
        <dt>Legend:</dt>
        <dd>Status numero uno</dd>
        <dd>Status two</dd>
    </dl>
</div>

иваш CSS: 

div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }

В результате получается семантически правильный HTML, который легче читать и, следовательно, легче модифицировать в будущем. Опорная скрипка .

1 голос
/ 08 июня 2011

Сначала сделайте ваш верхний промежуток блочным элементом, чтобы сложить их:

* * 1003 Статус: </span> ** 1005

затем плавающий средний делитель слева также:

добавить float: слева в #headmiddle в вашем css

1 голос
/ 08 июня 2011

ОБНОВЛЕНИЕ: Включение предложения @ Джереми Б

Должно ли это быть через изменения CSS?Имея дело со сценариями, подобными этому, вы должны быть осторожны с порядком, в котором определены элементы HTML.

Посмотрите на модификацию здесь: http://jsfiddle.net/TcRxp/8/

Я смог понять, чтовам нужно было изменить порядок трех DIV и использовать предложение CSS от @Jeremy B

По сути, логика для макета:

  1. Нарисуйте содержимое с плавающей точкой
  2. Нарисуйте содержимое с плавающей точкой слева
  3. Нарисуйте содержимое посередине (теперь оно будет отображаться справа от содержимого с плавающей точкой.
0 голосов
/ 09 июня 2011

Я получил это, собрав много разных источников. Решение Алекса Коулза было самым близким сразу, но середина была не в центре. Это было намного чище, чем мой беспорядок тоже. Я начал с кода из этого поста : 

<style type="text/css">
.leftit {
    float: left;
}
.rightit {
    float: right;
}
.centerit {
    width: 30%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.centerpage {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>

( скрипка выше )

Я взял элементы, которые Алекс очистил, что еще больше приблизило меня к цели, но блоки центрального цвета были слишком широкими. Из этого вопроса я узнал о "max-width", которая в итоге стала последней частью, в которой я нуждался ... или так я думал.

Редактировать: max-width не работает в режиме причуд IE7 (который я должен поддерживать), поэтому из этой страницы я узнал, как настроить мой CSS для работы в режиме причуд IE7, IE8, и FF.

Финальный код ( скрипка ): 

.leftit {
    float: left;
    font-size: 0.8em;
}
.rightit {
    float: right;
    font-size: 0.8em;
}
.centerit {
    width:220px;
    margin-right: auto;
    margin-left: auto;
    font-size: 0.8em;
}
#headmiddle div {
    border: 1px solid #000; 
    margin-bottom: 3px;
}
.centerpage {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

strong { font-weight: bold; }

.search { background: orange; }
.active { background: #8ed200; }

dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }

<div class="centerpage">
    <div class="leftit">a little search form here</div>
    <div class="rightit">
        <dl>
            <dt>Legend:</dt>
            <dd>Status numero uno</dd>
            <dd>Status two</dd>
        </dl>
    </div>
    <div class="centerit" id="headmiddle">
        <div class="active"><strong>Status:</strong>
            Active</div>
        <div class="search">Search results displayed</div>
    </div>
</div>

Благодаря всем замечательным ответам - я многому научился из этого вопроса.

Пол

0 голосов
/ 08 июня 2011

Если вам нужно сделать это с помощью CSS, посмотрите мои изменения: Fiddle

Я добавил следующее: 

#headmiddle span.status { display: block }

Это заставит ваши пролеты "стек».

...