Я хочу разделить мою страницу на четыре равные части, каждая из которых имеет высоту и ширину (50-50%).
Я не хочу использовать JavaScript. Я хочу, чтобы блоки (<div> s) изменялись автоматически (и относительно), если окно браузера изменено.
Я долгое время не работал с CSS. Я понятия не имею, как с этим справиться.
HTML
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
CSS
html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#div1 { background: #DDD; }
#div2 { background: #AAA; }
#div3 { background: #777; }
#div4 { background: #444; }
Демо на http://jsfiddle.net/CRSVU/
Если вы хотите контролировать, где они размещены отдельно от исходного кода:
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>
<div id="SW"></div>
html, body { height:100%; margin:0; padding:0 }
div { position:fixed; width:50%; height:50% }
#NW { top:0; left:0; background:orange }
#NE { top:0; left:50%; background:blue }
#SW { top:50%; left:0; background:green }
#SE { top:50%; left:50%; background:red }
Примечание. Если вы хотите отступы в своих регионах, вам нужно установить box-sizing на border-box:
div {
/* ... */
padding:1em;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
& hellip; в противном случае ширина и высота "50%" станут "50% + 2em", что приведет к визуальным перекрытиям.
Некоторые хорошие ответы здесь, а просто добавление подхода, на который не будут влиять границы и отступы:
<style type="text/css">
html, body{width: 100%; height: 100%; padding: 0; margin: 0}
div{position: absolute; padding: 1em; border: 1px solid #000}
#nw{background: #f09; top: 0; left: 0; right: 50%; bottom: 50%}
#ne{background: #f90; top: 0; left: 50%; right: 0; bottom: 50%}
#sw{background: #009; top: 50%; left: 0; right: 50%; bottom: 0}
#se{background: #090; top: 50%; left: 50%; right: 0; bottom: 0}
</style>
<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>
попробуйте это... Очевидно, вам нужно установить каждый div на 25%. Затем вам нужно будет добавить свой контент по мере необходимости. Надеюсь, что это поможет.
<html>
<head>
<title>CSS devide window by 25% horizontally</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%;
}
#top_div
{
height:25%;
width:100%;
background-color:#009900;
margin:auto;
text-align:center;
}
#mid1_div
{
height:25%;
width:100%;
background-color:#990000;
margin:auto;
text-align:center;
color:#FFFFFF;
}
#mid2_div
{
height:25%;
width:100%;
background-color:#000000;
margin:auto;
text-align:center;
color:#FFFFFF;
}
#bottom_div
{
height:25%;
width:100%;
background-color:#990000;
margin:auto;
text-align:center;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="top_div">Top- height is 25% of window height</div>
<div id="mid1_div">Middle 1 - height is 25% of window height</div>
<div id="mid2_div">Middle 2 - height is 25% of window height</div>
<div id="bottom_div">Bottom - height is 25% of window height</div>
</body>
</html>
Протестировано и отлично работает, скопируйте код в HTML файл и откройте его в браузере.
Подобно другим постам, но с важным отличием, чтобы сделать эту работу внутри div. Более простые ответы не очень-то копируют-вставляют, потому что они напрямую изменяют div или рисуют по всей странице.
Ключевым моментом здесь является то, что содержащая div divbox имеет относительное позиционирование, что позволяет ему удобно размещаться в вашем документе с другими элементами, в то время как четверти внутри имеют абсолютное позиционирование, предоставляя вам вертикальный/горизонтальный контроль внутри содержащего div.
В качестве бонуса текст центрируется по центру.
HTML:
<head>
<meta charset="utf-8">
<title>Box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">Title Bar</h1>
<div id="dividedbox">
<div class="quarter" id="NW">
<p>NW</p>
</div>
<div class="quarter" id="NE">
<p>NE</p>
</div>
<div class="quarter" id="SE">
<p>SE</p>
</div>
<div class="quarter" id="SW">
<p>SW</p>
</div>
</div>
</body>
</html>
CSS:
html, body { height:95%;} /* Important to make sure your divs have room to grow in the document */
#title { background: lightgreen}
#dividedbox { position: relative; width:100%; height:95%} /* for div growth */
.quarter {position: absolute; width:50%; height:50%; /* gives quarters their size */
display: flex; justify-content: center; align-items: center;} /* centers text */
#NW { top:0; left:0; background:orange; }
#NE { top:0; left:50%; background:lightblue; }
#SW { top:50%; left:0; background:green; }
#SE { top:50%; left:50%; background:red; }