Как разместить два бокса div бок о бок

Так что я довольно новичок в написании кодов (около нескольких недель), и я ударил стену, набирая коды для своего сайта. Я хочу, чтобы макет такой, как этотКак разместить два бокса div бок о бок

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

Мне также нужна помощь по ширине моего сайта? Сейчас похоже, что заголовок не помещается на странице, вызывая горизонтальную прокрутку. Kinda вот так

Я хочу, чтобы весь сайт выглядел так, как будто все это одна большая коробка, и я хочу весь контент внутри коробки. Может кто-нибудь, пожалуйста, помогите мне? Очень признателен. Заранее спасибо.

источник

2013-03-13 Richard Linares

Могли бы вы вставить немного кода CSS здесь? – kabuto178

Взгляните на CSS и HTML в глубину, вы поймете это. Он просто плавает ящики слева и справа, и эти ящики должны находиться внутри одного и того же div. http://www.w3schools.com/html/html_layout.asp может быть хорошим ресурсом.

источник

2013-03-13 00:38:36

w3schools следует избегать как ресурс, большая часть их информации неточна. Вики W3C - достойная альтернатива http://www.w3.org/wiki/CSS/Training –

это будет работать

<div style="width:800px;"> 
    <div style="width:300px; float:left;"></div> 
    <div style="width:300px; float:right;"></div> 
</div>

источник

2013-03-13 00:39:25

Внутренние divs не закончены должным образом. Просто записка для будущих копирайтеров. :) –

Я добавил

сразу после этого, чтобы предотвратить следующие элементы от плавания – Thomas

Это довольно просто:

http://jsfiddle.net/kkobold/qMQL5/

<div id="header"></div> 
<div id="container"> 
    <div id="first"></div> 
    <div id="second"></div> 
    <div id="clear"></div> 
</div>

#header { 
    width: 100%; 
    background-color: red; 
    height: 30px; 
} 

#container { 
    width: 300px; 
    background-color: #ffcc33; 
    margin: auto; 
} 
#first { 
    width: 100px; 
    float: left; 
    height: 300px; 
     background-color: blue; 
} 
#second { 
    width: 200px; 
    float: left; 
    height: 300px; 
    background-color: green; 
} 
#clear { 
    clear: both; 
}

источник

2013-03-13 00:40:18

Благодарим вас за сообщение! – user481610

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

<style> 
.wrapper { 
    width: 980px; 
} 
</style> 

<body> 
    <div class="wrapper"> 
    //everything else 
    </div> 
</body>

Что касается коробки содержания идти, я хотел бы предложить, пытаясь использование

<style> 
.boxes { 
    display: inline-block; 
    width: 360px; 
    height: 360px; 
} 
#leftBox { 
    float: left; 
} 
#rightBox { 
    float: right; 
} 
</style>

Я бы потратил некоторое время на изучение модели объекта-объекта и всех свойств «отображения». Они всегда будут полезны. Обратите особое внимание на «встроенный блок», я использую его практически каждый день.

источник

2013-03-13 02:51:14

-1

Основанный на макете, который вы указали, вы можете использовать свойство float left в css.

HTML

<div id="header"> LOGO</div> 
<div id="wrap"> 
<div id="box1"></div> 
<div id="box2"></div> 
<div id="clear"></div> 
</div> 
<div id="footer">Footer</div>

CSS

body{ 
margin:0px; 
height: 100%; 
} 
#header { 

background-color: black; 
height: 50px; 
color: white; 
font-size:25px; 

} 

#wrap { 

margin-left:200px; 
margin-top:300px; 


} 
#box1 { 
width:200px; 
float: left; 
height: 300px; 
background-color: black; 
margin-right: 20px; 
} 
#box2{ 
width: 200px; 
float: left; 
height: 300px; 
background-color: blue; 
} 
#clear { 
clear: both; 
} 
#footer { 
width: 100%; 
background-color: black; 
height: 50px; 
margin-top:300px; 
color: white; 
font-size:25px; 
position: absolute; 
}

источник

2014-07-22 20:06:57 prashanth

Как разместить два бокса div бок о бок

ответ

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