Hogyan csináljam meg?
Van 2 div-em egymás mellett és csak úgy kerülnek egymás mellé ha az egyiket balra igazítom, ugye float: left. Hogyan oldhatom meg hogy egymás mellett legyenek ugyan így, de középen? Kód itt van.
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " [link]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2oldal</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="o">
<div class="o1">
</div>
<div class="o2">
</div>
</div>
</body>
</html>
css:
@charset "utf-8";
.o1 {
position: relative;
width: 600px;
min-height: 200px;
background: black;
float: left;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.o2 {
position: relative;
width: 300px;
min-height: 200px;
background: black;
margin: 0px auto;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
válasza:amit írtál kódot, az egyszerűsítve annyi, hogy:
<div class="külső">
<div class="belső_bal"></div>
<div class="beső_jobb"></div>
</div>
addig szépen eljutottál, hogy a két belső div egymáshoz képest jó... annyi kell még, hogy a külső divet középre igazítod
tehát:
.o {
positon: relative;
width: xyz px; // két div szélssége+boderek+marginok+paddingok
és ami a középre záráshoz kell:
margin: 0 auto 0 auto;
}
válasza:De ha úgy egyszerűbben tudok segíteni, itt egy kód, ami a képen látható kimenetet adja:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [link]
<html xmlns=" [link] lang="hu">
<head>
<meta http-equiv="Content-Language" content="hu" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=" " />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Heimdall" />
<meta name="Robots" content="index,follow" />
<title>oldal</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="kulso">
<div id="belso" class="left"></div>
<div id="belso" class="right"></div>
</div>
</body>
</html>
CSS:
#kulso {
width: 1000px;
position: relative;
margin: 0 auto 0 auto;
}
#belso {
position: relative;
min-height: 200px;
background: black;
float: left;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.left {
width: 600px;
}
.right {
width: 300px;
margin-left: 100px;
}
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!