Отобразить проблемы встроенного блока

Question

Отобразить проблемы встроенного блока

0

У меня есть два divs, выровненные по бокам, и они работают так, как я хочу их на рабочем столе, но когда дело доходит до мобильного браузера (он работает на chrome mobile, как на рабочем столе), например Mozilla Firefox, Safari - один из divs, толкающий на дно. Я попытался установить переполнение: прокрутите до контейнера div, но это не решит проблему. Кто-нибудь может мне помочь?

CSS

.container{
    margin: 10px  auto 20px auto;
    display:table;
   overflow:scroll;
} 

.left_col{
    width: 700px;
    border:1px solid #C0C0C0;
    display: -moz-inline-stack;
    display: inline-block;
    background-color:#fff;
    vertical-align:top;
    zoom: 1;
    *display: inline;
}

.right_col{
    width:300px;
    border:1px solid #C0C0C0;
    display: -moz-inline-stack;
    display: inline-block;
    height:1090px;
    background-color:#fff;
    vertical-align:top;
    zoom: 1;
    *display: inline;
}

HTML

<div class="container">
    <div class=left_col"></div>
    <div class="right_col"></div>
</div>

Lmxc 19 сен. 2013, в 02:12

Источник

Теги:

html

css

2 ответа

Ещё вопросы

bmasterson · Answer 1 · 2013-09-18T22-38-00.000Z

Ваш видовой экран недостаточно широко в мобильном браузере для исправления 1000px контента. Рассмотрите возможность использования процентной ширины, если вы хотите сохранить этот макет.

.left_col{
    width: 70%;
    float:left;
}

.right_col{
    width:30%;
    float:left;
}

+1 Вы также должны добавить max-width: 1000px; ширина: 100% к контейнеру, это должно сделать его довольно гибким! :)

Ibu · Answer 2 · 2013-09-18T21-48-00.000Z

Мое решение будет состоять в том, чтобы по возможности установить ширину родителя.

.container{
   ...
   width:1024px;
} 

.left_col{
    width: 700px;
    float:left;
}

.right_col{
    width:300px;
    float:left;
}