Как получить 2 div's ложь рядом друг с другом

-1

Как я могу получить мои два div, чтобы собрать всю страницу вместе (10% и 90%) и сидеть рядом друг с другом.Как получить 2 div's ложь рядом друг с другом

HTML:

<body>  
    <div class="header" id= "headerxx"> 
    </div> 

    <div class="mainbody"> 
</div>

CSS:

body { 
    background-color: #F0F0F0; 
    margin-top: 0px; 
    width: 100%; 
    margin-left: 0px; 
} 

.header { 
    width: 10%; 
    margin-top: 0px; 
    float: left; 
}

источник

2015-04-08 Oliver Murfett

Здесь вы идете (jsFiddle)

HTML

<div class="main"> 
    <div class="header" id= "headerxx"> 
    </div> 

    <div class="mainbody"> 
    </div> 

    <div class="clear"> 
    </div> 
</div>

CSS

body { 
    background-color: #F0F0F0; 
    margin-top: 0px; 
    width: 100%; 
    margin-left: 0px; 
} 

.header { 
    width: 10%; 
    height: 200px; 
    margin-top: 0px; 
    float: left; 
    background-color: #000000; 
} 

.mainbody { 
    width: 90%; 
    height: 200px; 
    float: right; 
    background-color: #666666; 
} 

.clear { 
    clear: both; 
}

Я поставил высоты для демонстрационных целей, чтобы вы могли видеть, что происходит. На практике вам это не нужно.

источник

2015-04-08 08:22:35

. Ясность должна быть названа .clear? –

@OliverMurfett Нет, это не так, но это просто имеет смысл, [** узнайте о Clearfix здесь **] (http://stackoverflow.com/questions/8554043/what-is-clearfix). – Ruddy

также, как я могу сделать левый div 100% страницы, не более, не менее, и оставаться неподвижным @Ruddy –

Если вы ориентируетесь на новейший браузер, вы можете выровнять 2 div рядом друг с другом с помощью display:table и display:table-cell; .. Посмотрите на DEMO.

В этом макете я даю display:table элементу body в вашем случае, вы должны передать это свойство родительскому элементу.

CSS является

body{width:100%; display:table;} 
 

 
.header, .mainbody { 
 
display:table-cell; 
 
height:200px; 
 
border:1px solid gray; 
 
} 
 
.header{width:10%; background:rgba(34%, 63%, 23%, 1);} 
 
.mainbody{width:90%; background:rgba(55%, 67%, 19%, 1);}

<div class="header" id="headerxx"> 
 
    </div> 
 

 
    <div class="mainbody"> 
 
</div>

источник

2015-04-08 08:56:09

Попробуйте это.

CSS

.container{ 
    position: relative; 
    min-height: 100%; 
} 
.leftDiv{ 
    float: left; 
    min-height: 100%; 
    background: #f0f0f0; 
    width: 10%; 
} 
.rightDiv{ 
    float: left; 
    background: blue; 
    color: white; 
    width:90%; 
    height: 100%; 
}

HTML

<div class="container"> 
<div class="leftDiv"> 
     <p>This is the left div</p> 
</div> 
<div class="rightDiv"> 
    <p>This is the Right Div</p> 
</div>

Не могу понять ваше кодирование. Лучшая интерпретация, которую я мог бы придумать, заключается в том, что вы хотите, чтобы 2 div лежали рядом друг с другом, поэтому я сделал родительский div .container здесь, расположил его в относительном, чтобы все его дочерние divs полагались на него для позиционирования и измерений, я также дайте ему минимальную высоту 100% для демонстрационных целей. Тогда divs, которые лежат рядом друг с другом, являются .leftDiv и .rightDiv, каждый плавает слева, так что элемент рядом с ним будет занимать оставшееся пространство родителя, которое он не закрыл. Также я дал ему ширину 10% и 90%, а также высоту 100% для демонстрационных целей.

источник

2015-04-08 09:10:41

Как получить 2 div's ложь рядом друг с другом

ответ

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