Построение первичной ссылки bar

Что я хочу: создание простых ссылок/навигационной панели.Построение первичной ссылки bar

Что у меня в CSS:

.ico { 
    width:40px; 
}

Что у меня в HTML:

<body> 
<div id="logo"> 
<img src="logo.png" id="test" /> 
<img class="ico" src="images/home.png" /> 
<img class="ico" src="images/calendar.png" /> 
<img class="ico" src="images/support.png" /> 
<img class="ico" src="images/globe.png" /> 
<img class="ico" src="images/email.png" /> 
<div style="width:auto; border-style:solid; border-width:0px 0px 3px; border-color:#202020;"></div> 
</div> 
<div id="main"> 
<h1 class="title">This is the main title</h1> 
<p>This is a sample paragraph.</p> 
</div></body>

Как это выглядит:

Что требуется: Изображения (дом, календарь, поддержка, глобус, электронная почта) должны быть равномерно распределены и быть распределены с начала логотипа (DAERA) до конца экрана, для всех разрешений экрана и устройства.

источник

2015-11-22 Youstay Igo

Использование таблицы макета – Amit

Вы можете использовать загрузочный сетку. Вот ссылка, [загрузочная сетка] (https://getbootstrap.com/examples/grid/). –

Вам придется использовать @media querie для требуемых разрешений, и я бы использовал ul и li ... set ul как display: table; и ли отображение: таблица-ячейка более гибкая, чем таблица – Ljubisa

Это может быть полезно для вас. Ваш HTML разметка:

<div class="box"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>

Ваш CSS:

.box{ 
    display: flex; 
    justify-content: space-between; 
}

источник

2015-11-22 06:41:56 king

Превосходно! Но ... он выравнивает все изображения в верхней части div. Мне нужно, чтобы они были выровнены на нижней стороне. Так. Что теперь? –

.ico { 
    width:40px; 
    margin-right: 10px; 
}

источник

2015-11-22 09:34:52

Не могли бы вы добавить какое-то объяснение в свой ответ? Кодовые ответы не одобряются на SO. – honk

Это не _evenly_ распространяет все значки на экране в конце страницы: S –

Построение первичной ссылки bar

ответ

Смежные вопросы