2015-10-14 8 views
2

Допустим, у меня есть 2 дивыустановка 2 DIV рядом друг с другом

width: 140%; 
    padding: 13px; 
    height: 20; 
    float: left; 

как сделать их рядом друг с другом? (Лучший способ я могу)

+1

если у Вас есть 2 дивы с «ширина: 140%», вы не можете заставить их сидеть рядом друг с другом. Кроме того, вы используете «width: 50%» или меньше. –

+1

Пожалуйста, предоставьте jsfiddle. – Alex

+0

ширина 140% для одного div и в совокупности это станет 280%, а еще два div должны сидеть рядом друг с другом. это означает, что ваша страница будет иметь горизонтальную прокрутку. это то, что вы ищете? –

ответ

2

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

<div>Hello</div> 
<div>World</div> 

div { 
    border:1px solid #000; 
    width: 200px; 
    height:100px; 
    margin: 10px; 
    display: inline-block; 
} 
1

Рассмотрим это, если страница 100% ..

Как являются 2 дивы в общей сложности 280% собираются, чтобы поместиться внутри 100% -ная страница?

Также высота должна быть указана как height: 20px;.

Это было бы правильным способом, чтобы написать это:

div { 
    width: 50%; 
    float: left; 
    height: 20px; 
    padding: 13px; 
    box-sizing: border-box; 
} 

Или еще лучше:

div { 
    width: 50%; 
    display: inline-block. 
    height: 20px; 
    padding: 13px; 
    box-sizing: border-box; 
} 
1

Вы делаете дивы шире, чем экран с width:140% делая их равной менее чем на 100% это то, что вы ищете example здесь мы устанавливаем ширину на 45%, учитывая отступ, чтобы правильно выровнять

.box { 
    width: 45%; 
    padding: 13px; 
    height: 20; 
    background:blue; 
    margin-right: 20px; 
    float: left; 
} 
0

для случая, который вы указали в своем вопросе, лучшее возможное решение у меня есть.

HTML

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

CSS

*{ 
    box-sizing:border-box 
} 
.wrapper{ 
    display:table; 
    width:280%; 
} 
.box { 
    width:50%; 
    display:table-cell; 
    border:solid 2px red; 
    padding: 13px; 
    height: 20px; 
} 

в основном table макет с помощью div можно достичь результата вы ожидаете.

Я взял 280% ширину для обертки div и 50% для ящиков, в конце концов это станет 140% для каждой отдельной коробки, как вы ожидали.

Работа fiddle

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