0

введите сюда описание изображения

Нужно сверстать как на картинке. Проблема в расположении равномерно блоков под названиями. Пробовал через text-align: justify и after. Вариант не подходит. Посоветуйте еще варианты, пожалуйста.

структура хтмл

<div class="player-titles">
        <span>Player name</span>
        <span>Type</span>
        <span>Status</span>
        <span>Screen Orientation</span>
        <span>Dimensions</span>
        <span>Resolution</span>
        <span>Audience Metrics</span>
        <span>Mac Address</span>
        <span>Operations</span>
    </div>
    <div class="pl-player">
        <span class="player-name">Downstairs</span>
        <span class="player-type">Android</span>
        <span class="player-status">#color</span>
        <span class="player-orientation">Horizontal</span>
        <span class="player-resolution">1920x1080</span>
        <span class="player-metric">Yes</span>
        <span class="player-mac">00:1C:42:CA:D2:95</span>
        <span class="player-operations">#operations</span>
    </div>
4
  • Есть мысли в сторону табличной верстки. Но может еще есть выходы?
    – Baga
    15 фев 2016 в 14:31
  • хоть таблицами, хоть блоками верстайте, в левой колонке text-align:left, в центральных text-align:center. где у вас проблема? Предоставьте html код. 15 фев 2016 в 14:43
  • @Jean-Claude в данный момент пытаюсь такой, оредактировал вопрос.
    – Baga
    15 фев 2016 в 14:47
  • @Jean-Claude проблема в том, что плеера добавляются динамически. Хочется сделать блок плеера независимым от шапки.
    – Baga
    15 фев 2016 в 15:04

1 ответ 1

1

Верстка изображенного на скриншоте вовсе не проблема, делается банальным html, например таким: http://codepen.io/anon/pen/dGrWGG

        * {
            box-sizing: border-box;
        }
        .row {
            overflow: hidden;
            padding: 3px 0;
            width: 100%;
        }
        .row > div, .header > div {
            display: block;
            float: left;
            padding: 8px 0;
            text-align: center;
            width: 20%;
        }
        .header {
            border-bottom: 2px solid dodgerblue;
            border-top: 2px solid dodgerblue;
            margin-bottom: 2px;
            overflow: hidden;
        }
        .row > div {
            background-color: dodgerblue;
            color: white;
        }

.row > div:first-child {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}

.row > div:last-child {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}

        .name {
            margin-left: 15px;
        }


        .row > div:first-child {
            text-align: left;
        }

        .tags {
            background: white none repeat scroll 0 0;
            border-radius: 4px;
            color: royalblue;
            margin-right: 4px;
            padding: 1px 6px;
        }
        .green {
            background: green none repeat scroll 0 0;
            border-radius: 10px;
            display: inline-block;
            height: 20px;
            text-indent: -9999px;
            width: 20px;
        }
        .bgw {
            background: white url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_arrow_drop_down_48px-16.png") no-repeat scroll right center;
            border-radius: 4px;
            color: royalblue;
            margin-right: 4px;
            padding: 1px 20px 1px 6px;
        }
<div class="header">
        <div>Name</div>
        <div>Tags</div>
        <div>Type</div>
        <div>Status</div>
        <div>Screen</div>
    </div>
    <div class="row">
        <div><span class="name">Arnold</span></div>
        <div><span class="tags">FirstTag</span><span class="tags">second</span></div>
        <div>Android</div>
        <div><span class="green">0</span></div>
        <div><span class="bgw">Vertical</span></div>
    </div>
    <div class="row">
        <div><span class="name">SuperUser</span></div>
        <div><span class="tags">one</span></div>
        <div>Android</div>
        <div><span class="green">0</span></div>
        <div><span class="bgw">Vertical</span></div>
    </div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.