Как позиционируют три дивы по горизонтали

Я хочу, чтобы получить структуру, как это:Как позиционируют три дивы по горизонтали

--------------------------------------------- 
| head          | 
--------------------------------------------- 
|left-menu||---content-div------------------- 
| fixed ||      |   | 
|   || content-left  | con-right| 
|   ||--------------------------------|

CSS файл:

.left-menu { 
    position:fixed; /* fix menu, no scroll */ 
    left:0; 
} 
.content-div { 
    position:absolute; 
    float:right; 
    left:150px; 
} 
.content-right { 
    width: 310px; 
    float: right; 
} 
.content-left { 
    float: left; 
}

дивы:

<div> 
    <div class="left-menu" > </div> 

    <div class="content-div"> 
     <div class="content-left"> </div> 
     <div class="content-right"> </div> 
    </div> 
</div>

я content-right в следующей строке , не в той же строке с content-left, как у меня есть content-leftwidth=105% , но я этого не делаю. Я попробовал это и другое предложение, но не повезло. Как я могу исправить эту проблему?

источник

2016-02-15 JanOlMajti

Странная вещь, что я не могу воспроизвести проблему. Если вы посмотрите на это [JSFiddle] (https://jsfiddle.net/zxuoec0r/), вы увидите, что ваша настройка работает нормально. Я подозреваю, что ваша проблема лежит в более высоком div div оболочки или что-то в этом роде – Rotan075

Вставьте длинный текст в контент-левом, контент-право перейдет к следующей строке – JanOlMajti

Это потому, что вы не устанавливаете свойство 'width'' content-left '. Если вы установите 'width' свойства' content-left', он будет работать;) см. [DEMO HERE] (https://jsfiddle.net/zxuoec0r/2/) – Rotan075

Flexbox может это сделать.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.parent { 
 
    display: flex; 
 
    height: 100vh; 
 
} 
 
.left-menu { 
 
    position: fixed; 
 
    /* fix menu, no scroll */ 
 
    left: 0; 
 
    width: 150px; 
 
    background: red; 
 
    height: 100%; 
 
} 
 
.content-div { 
 
    margin-left: 150px; 
 
    background: blue; 
 
    flex: 1; 
 
    display: flex; 
 
} 
 
.content-right { 
 
    flex: 0 0 310px; 
 
} 
 
.content-left { 
 
    flex: 1; 
 
    background: orange; 
 
}

<div class="parent"> 
 
    <div class="left-menu"></div> 
 
    <div class="content-div"> 
 
    <div class="content-left"></div> 
 
    <div class="content-right"></div> 
 
    </div> 
 
</div>

источник

2016-02-15 14:40:46

[Flex] (https://css-tricks.com/snippets/css/a -guide-to-flexbox /) выглядит потрясающим и простым в использовании с div. благодаря – JanOlMajti

Отъезд в JsFiddle для демонстрации

HTML

<div> 
    <div class="header">HEADER</div> 
    <div class="left-menu" >LEFT MENU</div> 

    <div class="content-div"> 
     <div class="content-left">CONTENT LEFT</div> 
     <div class="content-right">CONTENT RIGHT</div> 
    </div> 
</div>

CSS

.header { 
    height: 70px; 
    background: blue; 
} 
.left-menu { 
    width: 120px; 
    background: red; 
    position: fixed; 
    left: 0px; 
    top: 70px; 
    bottom: 0px; 
} 
.content-div {background: yellow;margin-left: 120px} 
.content-div div { 
    display: inline-block; 
    width: 49%; 
} 
.content-left {background: aqua;} 
.content-right {background: green;}

источник

2016-02-15 13:25:48

Это должно работать для того, что вы хотите

.left-menu { 
position:fixed; /* fix menu, no scroll */ 
left:0; 
width: 150px; 
height: 100%; 
} 
.content-div { 
position:fixed; 
left:150px; 
right: 0px; 
height: 100%; 
} 
.content-right { 
float: right; 
} 
.content-left { 
float: left; 
}

Установите высоту и цвет фона на .content-left и .content-right, если вы хотите увидеть, как они позиционируют себя.

источник

2016-02-15 13:30:29

С длинным текстом в контент-левом, контент-право переходит к следующей строке – JanOlMajti

Положение что-то боль, я предлагаю использовать бутстрап для чего-то подобного.

(я только что видел комментарий выше меня о предлагая то же самое, но я дам вам код, чтобы вы могли реализовать только упаковывает)

Bootstrap поставляет хороший CDN, что вы можете бросить в вашем HTML и бутстрап куда угодно!

Так положить все это в HTML ...

<html> 
    <head> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

    </head> 

<body> 

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <h1>Header</h1> 
     </div> <!-- col-lg-12" --> 
    </div> <!-- row --> 


    <div class="row"> 

     <div class="col-lg-3" style="position: fixed;"> 
      <p>Left Menu Fixed</p> 
     </div> <!-- col-lg-3 --> 

     <div class="col-lg-6"> 
      <p>Content Left</p> 
     </div> <!-- col-lg-6 --> 

     <div class="col-lg-3"> 
      <p>Content Right</p> 
     </div> <!-- col-lg-3 --> 


     </div> <!-- row --> 
</div> <!-- container --> 
</body> 
</html>

Это обеспечит макет вы предлагаете.

Надеюсь, это поможет!

источник

2016-02-15 13:33:38

.left-menu { 
    position:fixed; /* fix menu, no scroll */ 
    left:0; 
    background: black; 
    width:15%; 
    height: 100%; 
} 
.content-div { 
    position:absolute; 
    float:right; 
    left:16%; 
    background: red; 
    width:84%; 
    height: 100%; 
} 
.content-right { 
    width: 310px; 
    height: 100%; 
    float: right; 
    background: yellow; 
} 
.content-left { 
    float: left; 
    background: green; 
    height: 100%; 
    width: calc(100% - 310px); 
}

источник

2016-02-15 13:42:24

Хороший ответ, ширина: calc (100% - 310 пикселей); работает. Так что divs нужна ширина или что? – JanOlMajti

Если вы хотите установить кросс-браузер, то вы не должны использовать calc(), потому что это вызовет только современные браузеры, поддерживающие CSS3 @JanOlMajti – Rotan075

Как позиционируют три дивы по горизонтали

ответ

Смежные вопросы