Вопросы Теги

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

Я ожидал два 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
поделиться