встроенный блок на пролете
-
09-06-2019 - |
Вопрос
Я ожидал, что два тега span в следующем примере будут отображаться рядом друг с другом, вместо этого они отображаются один под другим. Если я установлю ширину класса span.right на 49%, они будут отображаться рядом друг с другом. Я не могу понять, почему правый промежуток толкается вниз, так как у правого промежутка есть невидимый отступ / отступ, который заставляет его занимать более 50%. Я пытаюсь сделать это без использования таблиц HTML. Есть идеи?
<html>
<head>
<title>Test Page</title>
<style type='text/css'>
* {
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;
}
</style>
</head>
<body>
<div class='header'>
<span class='left'>Left Span 50% width</span>
<span class='right'>Right Span 50% width</span>
</div>
</body>
</html>
<Ч>
Спасибо за объяснение. Поплавок: слева прекрасно работает с ожидаемыми результатами в FF 3.1. К сожалению, в IE6 правая часть рендеринга отображает 50% от 50%, что дает ему ширину 25% окна браузера. Установка его ширины на 100% достигает желаемых результатов, но нарушает FF 3.1, который находится в режиме соответствия стандартам, и я это понимаю. Заставить его работать как в FF, так и в IE 6, не прибегая к хакерским атакам и не используя несколько листов CSS, было проблемой
Решение
float: left;
Попробуйте добавить это в span.left
Это заставит его плавать влево (как предполагает синтаксис).
<Ч>Я ни в коем случае не эксперт CSS, поэтому, пожалуйста, не принимайте это как неоспоримый факт, но я обнаружил, что когда что-то плавает, это не имеет никакого значения для вертикального положения вещей под ним.
Если вы перемещаете span.right вправо, а затем добавляете текст под ними, вы должны получить интересные результаты, чтобы остановить эти " интересные результаты " Вы можете использовать " очистить: влево / вправо / оба " что приведет к тому, что блок с чистым стилем окажется под чем-либо, плавающим влево / вправо / в обе стороны. W3Schools также имеет страницу с этим свойством.
И добро пожаловать в Stackoverflow.
Другие советы
Это потому, что 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>
Я сам предпочитаю последнее.
Мне не нравится этот хак, но, похоже, он работает как в 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.