Как поместить два элемента вправо, поддерживая одинаковый порядок визуально и семантически?

Как разместить два элемента внутри элемента-обертки вправо, сохраняя одинаковый порядок элементов визуально и семантически?

<style>
.container { widht: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

При рендеринге внутренние элементы будут отображаться в порядке «говорит Саймон», http: //jsbin.com/eravan/1/edit .

10 голосов | спросил Gajus 26 Jpm1000000pmSat, 26 Jan 2013 18:57:07 +040013 2013, 18:57:07

3 ответа


0

Основные исправления:

Добавление вспомогательного элемента

<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: left; margin: 0; }
.container .aux { float: right; }
</style>
<div class="container">
    <div class="aux">
        <p class="a">Simon</p>
        <p class="b">Says</p>
    </div>
</div>

http://jsbin.com/eravan/6/edit

Проблема этого подхода заключается в самом избыточном вспомогательном элементе.

Возиться с семантикой

<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="b">Says</p>
    <p class="a">Simon</p>
</div>

http://jsbin.com/eravan/9/edit

Это худшее решение и, к сожалению, также самое распространенное ( комментарий Али Бассама непосредственно ниже доказывает это).

Ни один из них не является правильным ответом.

ответил Gajus 26 Jpm1000000pmSat, 26 Jan 2013 19:00:34 +040013 2013, 19:00:34
0

Вы также можете использовать display: inline-block; вместо float при установке text-align: right; для родительского элемента.

http://jsbin.com/eravan/10/edit

ответил miru87 26 Jpm1000000pmSat, 26 Jan 2013 19:03:40 +040013 2013, 19:03:40
0

Здесь есть много возможностей с flexbox (включая визуальное переупорядочение элементов), поэтому подход, который вы выберете, зависит от окружающего контента. Однако IE не поддерживает его до версии 10.

http://caniuse.com/#feat=flexbox

.container {
    width: 200px;
    height: 50px;
    background: #333;
    display: flex;
}

.container.a {
    justify-content: flex-end;
}

.container p {
    width: 50px;
    height: 50px;
    background: #f00;
    margin: 0;
}

.container.b .a {
    margin-left: auto;
}

<div class="container a">
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

<hr />

<div class="container b">
    <p class="c">Let's Play</p>
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

http://jsfiddle.net/6NWmt/ (префиксы не включены)

ответил cimmanon 26 Jpm1000000pmSat, 26 Jan 2013 20:26:59 +040013 2013, 20:26:59

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132