встроенный блок на пролете - PullRequest
Новая
       24

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

6 голосов
/ 29 августа 2008

Я ожидал, что два тега 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, было проблемой

Ответы [ 3 ]

3 голосов
/ 29 августа 2008 
float: left;

Попробуйте добавить это в span.left

Это заставит его плавать влево (как предполагает синтаксис).

Я ни в коем случае не эксперт CSS, поэтому, пожалуйста, не принимайте это как неоспоримый факт, но я обнаружил, что когда что-то плавает, это не имеет значения для вертикального положения вещей под ним.

Если вы перемещаете span.right вправо, а затем добавляете текст под ними, вы должны получить интересные результаты, чтобы остановить эти «интересные результаты», вы можете использовать «clear: left / right / both», что приведет к блокировке с чистый стиль, чтобы быть под чем-либо плавал влево / вправо / оба. W3Schools также есть страница, посвященная этой недвижимости.

И добро пожаловать в Stackoverflow.

2 голосов
/ 24 апреля 2013

Это потому, что 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>

Я сам предпочитаю последнее.

1 голос
/ 29 августа 2008

Мне не нравится этот хак, но, похоже, он работает как в 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.

...