Выравнивание текста бок о бок в разных divs

-2

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

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

Heres мой код и CSS:

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="style/style.css" type="text/css"> 
<title>Bake Away</title> 
</head> 
<body> 
<img src="img/logo.png"> 
<img src="img/ad_bar.png"> 
<div id="wrapper"> 
<div id="navBar"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Responsibility</a></li> 
<li><a href="#">Working With Us</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Contact Us</a></li> 
</ul> 
</div> 
<div id="images"> 
<img src="img/scroll_1.png"> 
</div> 
<div id="content"> 
<span>Welcome to the Bake Away Bakery, here you can find out about 
all the wonderful things we bake. How you can place orders, who we 
bake for, where we're based, apply for jobs and contact head office.</span> 
</div> 
<div id="news"> 
<h3>Latest news:</h3> 
<span>We've just started our new line of cakes that should 
hit the shelves by Monday.</span> 
<span class="read">Read More</span> 
</div> 
</div> 
</body> 
</html> 
body{ 
margin:0; 
padding:0; 
width:100%; 
background-color:#E6E6E6; 
font-family:consolas; 
font-size:16px; 
font-weight:normal; 
text-align:center; 
} 
img{ 
margin-top:5px; 
margin-right:15px; 
} 
#wrapper{ 
width:1000px; 
border:1px solid blue; 
margin:3px; 
margin-left:13px; 
text-align:left; 
} 
#navBar{ 
color:white; 
margin:2px; 
margin-right:43px; 
height:50px; 
font-size:25px; 
font-weight:bold; 
float:center; 
text-align:center; 
} 
#navBar ul{ 
list-style-type:none; 
} 
#navBar li{ 
display:inline; 
} 
#navBar a{ 
text-decoration:none; 
background-color:#BDBDBD; 
color:black; 
padding:2px; 
} 
#navBar a:hover{ 
text-decoration:underline; 
background-color:#FE2E2E; 
color:white; 
} 
#images img{ 
margin-left:50px; 
} 
#content{ 
width:450px; 
margin-left:7px; 
margin-bottom:3px; 
font-size:16px; 
} 
#news{ 
width:300px; 
}

источник

2013-07-31 user2639366

дисплей: встроенный блок; будет вашим лучшим выбором, я бы сказал, чтобы выстроить их рядом друг с другом. Еще вам нужно использовать float: left; чтобы получить их все встроенные. – Keith

В вашем вопросе нет CSS, добавьте CSS или создайте скрипку. – eclipsis

Добавить display: inline-block на следующий CSS:

#navBar { 
    color:white; 
    margin:2px; 
    margin-right:43px; 
    height:50px; 
    font-size:25px; 
    font-weight:bold; 
    float:center;  // there is nothing like this. Wrong text-align:center; 
    display: inline-block; 
} 
#images img { 
    margin-left:50px; 
    display: inline-block; 
} 
#content { 
    width:450px; 
    margin-left:7px; 
    margin-bottom:3px; 
    font-size:16px; 
    display: inline-block; 
} 
#news { 
    width:300px; 
    display: inline-block; 
}

Проверить это JSFiddle

источник

2013-07-31 19:18:00 Praveen

Это все еще не удерживает его внутри синей линии. – user2639366

@ user2639366 - что о топ-2 изображениях? – Praveen

Ну, вы можете добавить display: inline-block;, Simple, как ад;)

источник

2013-07-31 23:23:30 Matan

Выравнивание текста бок о бок в разных divs

ответ

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