Проблемы с выравниванием блочного элемента.

iRina · November 29, 2007

Не понимаю почему элемент

mlir3 не становится под mlir2, ведь mlir2 становится под mlir1. Неужели только отрицательный маргин в право является решением при данном построении? Не хотелось бы отрицательных маргинов - все таки в спецификации, если не ошибаюсь он не предусматривается. Хочется сделать идеально. Спасибо за внимание.

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

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

 *{margin:0; padding:0; border:0}
 html,body{height:100%}
 body{background:#000000}
 ul{list-style:none}

 ul{display:inline; width:762px; height:130px; margin:0 0 0 124px; float:left; background:#393939}
 ul li{text-align:center}

 .mlil1{width:183px; height:39px; margin:3px 0 7px 0; float:left; background:#00ff00}
 .mlim1{width:218px; height:72px; margin:10px 0 0 93px; float:left; background:#00ff00}
 .mlir1{width:183px; height:39px; margin:3px 0 7px 85px; float:left; background:#00ff00}
 .mlir2{width:183px; height:39px; margin:3px 0 7px 0; float:right; background:#00ff00}
 .mlil2{width:183px; height:39px; margin:-30px 0 0 0; float:left; background:#0000ff}
 .mlir3{width:183px; height:24px; margin:16px 0 7px 0; float:right; background:#eeb52c}
 </style>
</head>

<body>
 <ul>
 <li class = "mlil1">mlil1</li>
 <li class = "mlim1">mlim1</li>
 <li class = "mlir1">mlir1</li>
 <li class = "mlir2">mlir2</li>
 <li class = "mlil2">mlil2</li> 
 <li class = "mlil3">mlil3</li>
 <li class = "mlim2">mlim2</li>
 <li class = "mlir3">mlir3</li>
 </ul> 
</body>
</html>

maddogrts · November 29, 2007

Не хотелось бы отрицательных маргинов - все таки в спецификации, если не ошибаюсь он не предусматривается

Глупости не читайте

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

Петр · November 29, 2007

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

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

 *{margin:0; padding:0; border:0}
 html,body{height:100%}
 body{background:#000000}
 ul{list-style:none}

 ul{display:inline; width:762px; height:130px; margin:0 0 0 124px; float:left; background:#393939}
 ul li{text-align:center}

 .mlil1{width:183px; height:39px; margin:3px 0 7px 0; float:left; background:#00ff00}
 .mlim1{width:218px; height:72px; margin:10px 0 0 93px; float:left; background:#00ff00}
 .mlir1{width:183px; height:39px; margin:3px 0 7px 85px; float:left; background:#00ff00}
 .mlil2{width:183px; height:39px; margin:-30px 0 0 0; clear:both; float:left; background:#0000ff}
 .mlim2{width:218px; height:72px; margin:10px 0 0 93px; float:left; background:#00ff00}
 .mlir2{width:183px; height:39px; margin:-30px 0 7px 0; float:right; background:#00ff00}
 .mlil3{width:183px; height:39px; margin:-60px 0 0 0; clear:both; float:left; background:#0000ff}
 .mlir3{width:183px; height:24px; margin:-60px 0 7px 0; float:right; background:#eeb52c}
 </style>
</head>

<body>
 <ul>
 <li class = "mlil1">mlil1</li>
 <li class = "mlim1">mlim1</li>
 <li class = "mlir1">mlir1</li>
 <li class = "mlil2">mlil2</li>
 <li class = "mlim2">mlim2</li>
 <li class = "mlir2">mlir2</li>
 <li class = "mlil3">mlil3</li>
 <li class = "mlir3">mlir3</li>
 </ul> 
</body>
</html>

может как-то так?

Петр · November 29, 2007

сорри, я где-то там облажался

iRina · December 8, 2007

Петрович, жжу не могу. :rolleyes:

Но если серьезно,то на самом деле там дело в маргингах вроде было.. не помещался из-за этого блок.

Sign In

Проблемы с выравниванием блочного элемента.

Question

iRina

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

maddogrts

Link to comment

Share on other sites

Петр

Link to comment

Share on other sites

Петр

Link to comment

Share on other sites

iRina

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information