О позициях див

Question

О позициях див

0

Моя страница разделена на две колонки:

<div id="wrapper">
    <div id="left" style="float:left; width:15%;">
        <span style="width:15%"; id="dog">Hi i'm a dog</span>
    </div>

    <div id="right" style="float:left; width:85%;">
        <p>Hello world</p>  
    </div>
</div>

Однако высота пролета (собака) позиционируется с использованием JS:

document.getElementById("dog").style.position = "absolute";
document.getElementById("dog").style.top = "20px";

И в этом случае левый столбец будет считаться пустым, а содержимое правого столбца будет игнорировать 15% и начинаться слева от экрана, перекрывая текст диапазона. До сих пор я могу решить это, просто написав хотя бы один символ в левом столбце без JS.

Как еще я могу "заставить" правую колонку начать после 15% левого столбца?

благодаря

user3400776 20 апр. 2014, в 19:54

Источник

2

установить min-height для левого столбца
Rooster 20 апр. 2014, в 17:31

Теги:

javascript

html

width

3 ответа

Ещё вопросы

установить min-height для левого столбца

JDGD · Answer 1 · 2014-04-20T17-44-00.000Z

См. Ниже - используйте комбинацию "min-width" и измените правый div на "float: right":

<div id="wrapper">
    <div id="left" style="float:left; width:15%; min-width:15%">
        <span style="width:15%"; id="dog"></span>
    </div>

    <div id="right" style="float:right; width:85%;">
        <p>Hello world</p>  
    </div>
</div>

Abhas Tandon · Answer 2 · 2014-04-20T15-13-00.000Z

Используйте min-height

См.: http://jsfiddle.net/jN9SV/

<div id="wrapper">
    <div id="left" style="float:left; width:15%; min-height:1px">
        <span style="width:15%"; id="dog">Hi i'm a dog</span>
    </div>

    <div id="right" style="float:left; width:85%;">
        <p>Hello world</p>  
    </div>
</div>

shyam · Answer 3 · 2014-04-20T15-03-00.000Z

Использование float: право на второе подразделение помогает, если вы имеете дело только с двумя разделами.

<div id="wrapper">
<div id="left" style="float:left; width:15%;">
    <span style="width:15%"; id="dog">Hi i'm a dog</span>
</div>

<div id="right" style="float:right; width:85%;">
    <p>Hello world</p>  
</div>
</div>