CSS Макеты и встроенный блок с шириной%

Im пытается создать макет жидкости из 3 или более DIV коробки, которые могут сидеть в фиксированном или жидкости контейнер, который выглядит следующим образом:CSS Макеты и встроенный блок с шириной%

example:

До сих пор ive используется дисплей: встроенный блок, чтобы два из них сидели рядом друг с другом, что работает, однако, когда ширина установлена на 48%, а маржа установлена на 1% (которая, когда все внутри, должна складываться до в общей сложности 100%, если im правильно?) второй div переходит к новой строке.

Что касается 3-й бокс, когда я установить ширину до 98% (а затем запас на 1%, что применяется) нависает окно контейнера справа ...

Что ив по существу закончилась с этим является: problem:

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

Например: http://imgur.com/igI73Y1

По существу, что им пытаются произвести быстрый фрагмент кода, чтобы использовать, что я могу добавить в любой контейнер на сайте, что обеспечивает хороший, чистый макет, готовый к контент будет добавлен.

(Im сделать несколько различных макетов)

Id хотел, чтобы попытаться ограничить сколько классов создаются таким образом, я могу легко редактировать макеты по мере необходимости.

, например:

.contentbox (основные 'Настройки', чтобы сделать эти коробки работают)

.smallbox (если 3 дивы установлены в .smallbox один за другим, 3 покажет встроенный)

.normalbox (если 2 дивы установлены в .normalbox один за другим, то 2 будет показывать встроенный)

.largebox (если 1 дивы установлены на .largebox он будет идти к краю контейнера)

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

В настоящее время это то, что ив получил:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
width: 600px; 
border: thin solid #000; 
} 
.contentbox { 
position:relative; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: #00F; 
border-right-color: #00F; 
border-bottom-color: #00F; 
border-left-color: #00F; 
display: inline-block; 
width: 48%; 
margin: 1%; 
vertical-align: top; 

} 
.largebox { 
width:100%; 
} 
</style> 
</head> 

<body> 
<div id="container"> 
<div class="contentbox">class="contentbox"</div> 
<div class="contentbox">class="contentbox"</div> 
<div class="contentbox largebox">class="contentbox largebox"</div> 
</div> 
</body> 
</html>

Спасибо вам за помощь!

источник

2015-08-01 PaulF

Вы должны учитывать, что границы занимают ширину и что запас 1% от любой стороны большого контейнера означает, что ширина его может быть меньше 100%. Я установил его на 94, а ваши маленькие - на 45 и установил прокладку на 0! Important; Теперь это работает.

#container { 
 
    width: 100%; 
 
    padding: 0!important; 
 
    border: thin solid #000; 
 
} 
 
.contentbox { 
 
    position: relative; 
 
    border-top-style: solid; 
 
    border-right-style: solid; 
 
    border-bottom-style: solid; 
 
    border-left-style: solid; 
 
    border-top-color: #00F; 
 
    border-right-color: #00F; 
 
    border-bottom-color: #00F; 
 
    border-left-color: #00F; 
 
    display: inline-block; 
 
    width: 45%; 
 
    margin: 1%!important; 
 
    vertical-align: top; 
 
} 
 
.largebox { 
 
    width: 94%; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Containers</title> 
 

 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div class="contentbox">class="contentbox"</div> 
 
    <div class="contentbox">class="contentbox"</div> 
 
    <div class="contentbox largebox">class="contentbox largebox"</div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-08-01 16:40:30

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

@PaulF я бы уменьшил нижний контейнер на процентный пункт, возможно, 1,5, но не путайте с маленькими –

@PaulF на самом деле я протестировал его, и 93, похоже, делает трюк –

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
width: 100%; 
border: thin solid #000;float:left; 
} 
.contentbox { 
position:relative; 
border:0px solid #00f; 
display: inline-block; 
width: 48%;float:left;box-shadow:0px 0px 2px 0px #555555; 
margin: 1%; 
vertical-align: top; 

} 
.largebox { 
width:98%;margin: 1%; 
} 
</style> 
</head> 

<body> 
<div id="container"> 
<div class="contentbox">class="contentbox"</div> 
<div class="contentbox">class="contentbox"</div> 
<div class="contentbox largebox">class="contentbox largebox"</div> 
</div> 
</body> 
</html>

источник

2015-08-01 17:22:27 Gowtham

Это действительно интересное обходное решение, использующее тени для границы, а не фактическую границу, выглядит красиво и работает как шарм. В конце я использовал css calc и придумал это решение: https://jsfiddle.net/7tmtegoc/ – PaulF

CSS Макеты и встроенный блок с шириной%

ответ

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