встроенный блок на промежутке
Я ожидал два span теги в следующем образце для отображения друг рядом с другом вместо этого они отображаются один ниже другого. Если я установил width из класса span.right к 49% они отображаются друг рядом с другом. Я не могу выяснить, почему правильный промежуток снижен как правильный промежуток, имеет некоторую невидимую операцию padding/margin который заставляет его взять больше чем 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>
Спасибо за объяснение. float:left работает красиво с ожидаемыми результатами в FF 3.1. К сожалению, в IE6 промежуток правой стороны представляет 50% 50%, в действительности давая ему ширину 25% окна браузера. Установка его ширины к 100% достигает желаемых результатов, но перерывы в FF 3.1, который находится в режиме соответствия стандартов и я понимаю это. Получение этого работать и в FF и в IE 6, не обращаясь к взломам или с помощью нескольких листов CSS было проблемой
2 ответа
float: left;
Попытайтесь добавить это к span.left
Это заставит это плавать налево (как предложено синтаксисом).
Я не эксперт CSS каким-либо образом, поэтому не берите это в качестве бесспорного факта, но я нахожу, что, когда что-то пускается в ход, это не имеет никакого значения к вертикальному положению вещей ниже его.
Если Вы плаваете, span.right направо затем добавляют текст под ними, необходимо получить некоторые интересные результаты, для остановки этих "интересных результатов", можно использовать "ясный: left/right/both", который заставит блок с четким моделированием находиться под чем-либо пущенным в ход к left/right/both. W3Schools имеют страницу на этом свойстве также.
И добро пожаловать в Stackoverflow.
Мне не нравится этот взлом, но это, кажется, делает задание и в 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.