Вопросы Теги

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

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

6
задан Priyanga 14 October 2019 в 10:42
поделиться

2 ответа

float: left;

Попытайтесь добавить это к span.left

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

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

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

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

3
ответ дан 17 December 2019 в 02:36
поделиться

Мне не нравится этот взлом, но это, кажется, делает задание и в 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.

1
ответ дан 17 December 2019 в 02:36
поделиться