Плавающие теги Div переносятся на новую строку при изменении размера окна

Question

У меня есть два div, которые я хочу разместить в одной строке. Я не хочу, чтобы правильный обтекатель оборачивался до тех пор, пока ширина окна не станет около 250 пикселей.

Я устанавливаю начальную ширину блоков в процентах, и это, похоже, вызывает проблемы. Правый div будет перенесен на новую строку задолго до того, как уменьшится до минимальной ширины 100 пикселей;

<div id="#container">
    <div id="left">
        <div id="box"></div>
    </div>
    <div id="right">
        <h1>Hello World</h1>
    </div>
</div>

#container {
    display: table;
    width: 100%;
}
#box {
    width: 100px;
    height: 100px;
    background: gray;
    display: inline-block;
    max-width: 100%;
}
#left {
    float: left;
    width: 23.6%;
    min-width:150px;
    background: gold;
    text-align: center;
}
#right {
    float: left;
    width: 76.4%;
    min-width:100px;
    background: pink;
}

http://jsfiddle.net/5C6GB/

css positioning

0

Dex 8 Июн 2014 в 16:08

Answer 1

Удаление ширины в правом div частично решило проблему.

Но похоже, что мне пришлось прибегнуть к использованию display:table*

http://jsfiddle.net/5C6GB/3/

<div id="container">
    <div class="tr">
        <div id="left" class="td">
            <div id="box"></div>
        </div>
        <div id="right" class="td">
            <!-- <h1>Hello World</h1> -->
        </div>
    </div>
</div>

#container {
    display: table;
    width: 100%;
    background: red;
    height: 100px;
}
#box {
    width: 100px;
    height: 100px;
    background: gray;
    display: inline-block;
    max-width: 100%;
}
#left {
    width: 25%;
    min-width:150px;
    background: gold;
    text-align: center;
    height: 100%;
}
#right {
    min-width:100px;
    background: pink;
    width: 75%;
    vertical-align: bottom;
}
.tr {
    display: table-row;
    width: 100%;
}
.td {
    display: table-cell;
}


@media only screen and (max-width: 600px) { 
    #left, #right {
        display:block;
        width: 100%;
        min-height: 100px;
    }
    .tr {
        display: block;
    }
    #container {
        display: block;
    }
}

1

Dex 9 Июн 2014 в 12:48

Answer 2

Это min-width:150px; в левом div, который заставляет правый div переноситься на новую строку задолго до того, как он сжимается до минимальной ширины 100 пикселей;

#left {
    float: left;
    width: 23.6%;
    min-width:150px; /*remove  or change this to a smaller amount */
    background: gold;
    text-align: center;
}

FIDDLE

0

Danield 8 Июн 2014 в 16:18

Плавающие теги Div переносятся на новую строку при изменении размера окна

2 ответа

Похожие вопросы

Новые вопросы

css