Встроенный блок на промежутке
Я ожидал, что два тега span в следующем примере будут отображаться рядом друг с другом, вместо этого они будут отображаться один под другим. Если я установлю width класса span прямо на 49%, они будут отображаться рядом друг с другом. Я не могу понять, почему правый промежуток сдвигается вниз, как будто в правом промежутке есть какой-то невидимый padding/margin, из-за чего он занимает более 50%. Я пытаюсь сделать это без использования таблиц HTML. Есть идеи?
* {
margin: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
border: none;
}
div.header {
width: 100%;
height: 80px;
vertical-align: top;
}
span.left {
height: 80px;
width: 50%;
display: inline-block;
background-color: pink;
}
span.right {
vertical-align: top;
display: inline-block;
text-align: right;
height: 80px;
width: 50%;
background-color: red;
}<html>
<head>
<title>Test Page</title>
</head>
<body>
<div class='header'>
<span class='left'>Left Span 50% width</span>
<span class='right'>Right Span 50% width</span>
</div>
</body>
</html>Спасибо за объяснение. float:left прекрасно работает с ожидаемыми результатами в FF 3.1. К сожалению, в IE6 правый диапазон отображает 50% от 50%, фактически давая ему ширину 25% окна браузера. Установка его ширины на 100% дает желаемые результаты, но ломается в FF 3.1, который находится в режиме соответствия стандартам, и я это понимаю. Было непросто заставить его работать как в FF, так и в IE 6, не прибегая к хакам и не используя несколько листов CSS.
Ответы 3
float: left;
Попробуйте добавить это в span.left
Это заставит его плавать влево (как предполагает синтаксис).
Я ни в коем случае не эксперт по CSS, поэтому, пожалуйста, не принимайте это как неоспоримый факт, но я считаю, что когда что-то плавает, это не имеет значения для вертикального положения вещей под ним.
Если вы переместите span.right вправо, а затем добавьте текст под ними, вы должны получить некоторые интересные результаты, чтобы остановить эти «интересные результаты», вы можете использовать «clear: left / right / both», что приведет к блоку с четким стилем чтобы быть под чем-нибудь плавал влево / вправо / в обе стороны. У W3Школы есть страница об этом свойстве.
И добро пожаловать в Stackoverflow.
Спасибо за быстрый ответ: добавление float: left заставило 2 пролета рендериться рядом друг с другом. Однако я не понимаю, почему пролет опускается без поплавка. Что его толкает?
Высота пролета - вот почему он толкнул меня вниз, и вполне могла быть вашей причиной.
Мне не нравится этот хак, но, похоже, он работает как в Firefox, так и в IE6:
span.right {
vertical-align:top;
display:inline-block;
text-align:right;
height:80px;
width:50%;
*width:100%;
background-color:red;
}
Обратите внимание на *width: 100%, который, кажется, удовлетворяет требованиям IE6 и игнорируется Firefox.
Это связано с тем, что inline и inline-block включают пробелы (в вашем случае разрыв строки) между элементами. В вашем случае общая ширина элементов составляет 50% + 50% + пробел> 100%.
Вы должны либо поместить два элемента в одну строку в вашем HTML-документе (без пробелов).
<div class='header'>
<span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>
Или используйте HTML-комментарии
<div class='header'>
<span class='left'>Left Span 50% width</span><!--
--><span class='right'>Right Span 50% width</span>
</div>
Я сам предпочитаю последнее.
Зачем нужна поддержка IE6? ie6nomore.com