Странный, дополнительный запас с разметкой поплавка

Question

Странный, дополнительный запас с разметкой поплавка

0

Я пытаюсь настроить простой макет, состоящий из двух столбцов,

Один плавает влево, как боковая панель. Другой, естественно, "плавает" с правой стороны, устанавливая левый край.

(Я хотел горизонтально выровнять два элемента)

Но я получил дополнительный запас поверх левого элемента, как видно на этой картинке:

Присоединенный исходный код (или ссылка jsfiddle)

<html><head>
        <style>
        .leftbar {
            float: left;
        }
        .userinfo-meta {
            border: 3px solid #666;
            min-height: 300px;
        }
        .post {
            min-height: 100px;
            margin-left: 21%;
            width: 60%;
            border: 3px solid #876;
        }
    </style>
</head>
<body>
    <div class="post">This element should be on the same level as the right</div>
    <div class="userinfo-meta leftbar">This one floats to the left</div>
</body></html>

PS Я не могу использовать отрицательный margin-top для левого элемента, высота другого элемента меняется... Если это изменится, верхний край должен быть снова настроен.

daisy 27 апр. 2014, в 13:09

Источник

Теги:

html

css

layout

4 ответа

0

Я думаю, вы должны немного обновить свой HTML:

  <html>
    <head>
</head>
<body>
    <div class="post">
        <div class="internal">
        This element should be on the same level as the right
        </div>
    </div>
    <div class="userinfo-meta leftbar">
        <div class="internal">This one floats to the left</div>
    </div>
</body>

http://jsfiddle.net/SXtz5/6/ (там вы можете увидеть CSS - тоже немного другое).

Затем вы можете настроить любое дополнение/край с помощью внутреннего div.

marcineck 27 апр. 2014, в 08:06

0

Добавление поля означало, что divs не пошли бы так. Если вы float на .post право Div вам не нужно, чтобы float в .leftbar DIV слева, вы можете, если вы хотите.

Добавить float:right и удалить margin-left для .post CSS:

    .post {
        min-height: 100px;
        width: 60%;
        border: 3px solid #876;
        float:right;
    }

Смотрите эту скрипту: http://jsfiddle.net/vagish/SXtz5/9/

Vagish 27 апр. 2014, в 07:49

0

Попробуйте этот код.

<div class="wrapper">
    <div class="post">
        This element should be on the same level as the right
    </div>
    <div class="leftbar">This one floats to the left</div>
</div>

* {
    box-sizing:border-box;
}

.wrapper:before, .wrapper:after{
    display:table;
    content:"";
}

.wrapper:after{
    clear:both;
}

.leftbar {
    border: 3px solid #876;
    width:40%;
    float:left;
}

.post {
    min-height: 100px;
    width: 60%;
    border: 3px solid #876;
    float:right;
}

И если вы хотите иметь одинаковый высоту слева и справа column.you можете попробовать с display: table class.

Jeyarathnem Jeyachanthuru 27 апр. 2014, в 07:41

0

Демо Здесь jsfiddle.net/SXtz5/8
Jeyarathnem Jeyachanthuru 27 апр. 2014, в 10:24

Ещё вопросы

web-tiki · Accepted Answer · 2014-04-27T07-28-00.000Z

Вам нужно изменить порядок в разметке HTML следующим образом:

<div class="userinfo-meta leftbar">This one floats to the left</div>
<div class="post">This element should be on the same level as the right</div>

FIDDLE