Позиция 2 divs в той же строке

Я пытаюсь разместить свой первый сайт, и я застрял в позиционировании двух div в одной строке. Я разместил изображение ниже, показывающее макет, который я пытаюсь достичь.Позиция 2 divs в той же строке

Это код, который у меня есть для 2-дивы в данный момент.

<div class="full-width"> 
    <div class="logo"> 
     <img src="img/logo.png"/> 
    </div> 
    <div class="social"> 
     <ul class="social-icons"> 
     <li><img src="img/facebookSS.png"/></li> 
     <li><img src="img/twitter.png"/></li> 
     <li><img src="img/instagramSS.png"/></li> 
     </ul> 
    </div> 
    <div class="address"> 
    <p>Address to go here</p> 
    </div> 
    </div>

Я немного поиграл с CSS, но просто не могу понять, как это правильно.

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

* { 
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box; 
} 

    body { 
    font-size: 20px; 
    font-family: 'Open Sans', sans-serif; 
    color: #fff; 
    position: relative; 
} 

.logo { 
    width: 300px; 
    height: auto; 
    position: relative; 
    display: inline-block; 
} 

.logo img { 
    width: 100%; 
    height: auto; 
} 

.social { 
    display: inline-block; 
    float: right; 
    margin-right: 20%; 
} 

.social li { 
    display: inline-block; 
} 

.social li img { 
    width: 50px; 
    height: auto; 
} 

.full-width { 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
}

источник

2016-09-09 rufus

как насчет размещения css, с которым вы играли, с – rlemon

Обычно div занимает всю строку по умолчанию. Вот как они разработаны. –

, конечно, что помогло бы, не так ли, может быть, там, здесь вы идете, я добавил его в исходное сообщение – rufus

Вам нужно создать несколько контейнеров для Div-х годов. Вот очень простой пример, чтобы объяснить:

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="test.css"> 
    <title></title> 
</head> 
<body> 



<div class="container"> 
    <div id="one"></div> 
    <div id="two"> 
     <div id="three"></div> 
     <div id="four"></div> 
    </div> 
</div> 
</body> 
</html>

Класса контейнера будет занимать всю ширину страницы и содержит все выше панель навигации. Div будет вашим логотипом, чем div two будет другим контейнером, в котором вы можете добавить больше div (три и четыре), которые занимают процент от высоты div two. Чем внутри одного из этих div, вам нужно поставить свои социальные логотипы, а адрес в следующем, чтобы он отображался внизу. Вот CSS:

* { 
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box; 
} 

.container { 
    width: 100%; 
} 

#one { 
    height: 300px; 
    width: 300px; 
    background-color: green; 
    float: left; 
    margin-left: 25%; 
} 

#two { 
    height: 300px; 
    width: 500px; 
    float: left; 
    margin-left: 10%; 
} 

#three { 
    height: 30%; 
    width: 100%; 
    background-color: yellow; 
} 

#four { 
    height: 70%; 
    width: 100%; 
    background-color: blue; 
}

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

источник

2016-09-09 18:38:47

Спасибо большое за это, кажется, почти там, что идеально. Единственное, что мне нужно, чтобы div 1 'logo' находился в центре страницы. Будет продолжать играть и посмотреть, смогу ли я решить эту проблему. – rufus

Обновлены:

Я создал DIV с классом .top, который имеет определенную ширину, которая позволяет центр ничего в нем с margin:auto;. Я создал раздел вокруг ваших социальных иконок и правильно его разместил. Это лучший пример, чем мой предыдущий, потому что логотип находится в центре.

Я надеюсь, что это помогает: https://jsfiddle.net/0sptpx0j/3/

источник

2016-09-09 18:39:37

Привет, ребята, спасибо за все советы, я решил после прочтения об абсолютном позиционировании идти по этому пути. это то, что я придумал.

<div class="full-width"> 
    <div class="logo"> 
    <img src="img/logo.png"/> 
    </div> 
    <div class="social"> 
    <div class="social-list"> 
     <ul class="icons"> 
     <li><img src="img/facebookSS.png"/></li> 
     <li><img src="img/twitterSS.png"/></li> 
     <li><img src="img/instagramSS.png"/></li> 
     </ul> 
    </div> 
    <div class="address"> 
     <p>Address goes in here</p> 
    </div> 
    </div> 
</div> 


.logo { 
    width: 300px; 
    height: auto; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

.logo img{ 
    width: 100%; 
    height: auto; 
} 

.social { 
    float: right; 
    width: 300px; 

} 

.social-list { 
    width: 100%; 
} 

.icons { 
    list-style: none; 
    padding: 0; 
} 

.icons li { 
    display: inline-block; 
    margin-right: 10px; 

} 
.icons img { 
    width: 50px; 
    height: auto; 
} 

.full-width { 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
}

источник

2016-09-10 08:29:45 rufus

Позиция 2 divs в той же строке

ответ

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