Нечетное поле на моих делах, как мне решить это? - PullRequest
Новая
       23

Нечетное поле на моих делах, как мне решить это?

0 голосов
/ 24 октября 2010

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

Давайте представим, что я не могу использовать тег float:left; по причине, когда я использую display:inline-block; странные поля появляются на элементах (скажем, divs), как мне исправитьэто?

Проблема на FF3, и IE8 никогда не тестировался в других браузерах, но если он не будет работать на них, на чем он будет работать?

Оригинальный код 

<!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>Why does that happen</title>
<style type="text/css">

* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}

body {padding:0px; margin:0 auto;}

div{margin: 0 auto;}

div div{margin: 0;}

.body {background:#CCC; width:900px; }

.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

</style>
</head>
<body>

<div class="body">


    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="light-blue"></div>
    <div class="light-green"></div>
    <div class="heavy-red"></div>





</div>


</body>
</html>

Решено: устранение пробела в разметке: 

<!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>Why does that happen</title>
<style type="text/css">

* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}

body {padding:0px; margin:0 auto;}

div{margin: 0 auto;}

div div{margin: 0;}

.body {background:#CCC; width:900px; }

.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

</style>
</head>
<body>

<div class="body">


    <div class="red"></div><div class="blue"></div><div class="green"></div><div class="light-blue"></div><div class="light-green"></div><div class="heavy-red"></div>

</div>


</body>
</html>

Ответы [ 4 ]

2 голосов
/ 24 октября 2010

Проблема вызвана пробелами в разметке между элементами div. Если вы не хотите их выпускать (почему бы и мне не интересно), у вас есть несколько вариантов.

  1. Удалите пробелы, чтобы разметка находилась на одной строке.

  2. Если вы не хотите, чтобы какой-либо текст появлялся в этих разделах, вы можете сделать это

    DIV {размер шрифта: 0;}

0 голосов
/ 24 октября 2010

во всех ваших внутренних классах div используйте margin-left: 0px

.red {background:#F00;
height:300px; width:300px; margin-left: 0px; display: inline-block;
}

.blue {background:#03F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

.green {background:#090;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

.light-blue {background:#39F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

.light-green {background:#9FC;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

.heavy-red {background:#C00;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

Я разместил окончательный HTML на http://jsbin.com/uwavi3

Мне пришлось удалить display: inline-block, чтобы он работал на jsbin при локальном запуске из файла, который мне не нужен. Я думаю, что jsbin использует своего рода сброс CSS.

Edit2 для поплавка: левый вид макета

Извините за неправильное понимание вопроса. Увеличение ширины родительского div и использование промежутков вместо div (для цветных блоков, таких как красный, синий и т. Д.) Работает для IE8 и FF3.6. Проверьте здесь http://jsbin.com/uwavi3/3

0 голосов
/ 24 октября 2010

Обычной практикой для того, чтобы ваши сайты стали более совместимыми с браузерами, является использование файла сброса css. Проверьте этот вопрос https://stackoverflow.com/questions/116754/best-css-reset

0 голосов
/ 24 октября 2010

Это приводит к появлению поля слева и справа от каждого элемента (это не display:inline): 

* { margin:0 auto; }

Возможно, вы хотите использовать это как правило сброса. 

* { margin:0; }

Затем вы можете применить margin:0 auto к вещам, которые вы хотите центрировать.

...