встроенный блок на пролете

StackOverflow https://stackoverflow.com/questions/34581

Вопрос

Я ожидал, что два тега 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.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top