Как создать макет из 4 столбцов, которые имеют один столбец с динамической шириной, а остальные 3 четные?

Question

Я не уверен, что лучший способ решить эту проблему. Мне нужен макет из 4 столбцов, первый столбец имеет неизвестную (динамическую) ширину, остальные 3 столбца должны равномерно заполнять оставшееся пространство. Сложная часть состоит в том, что все столбцы должны быть прямыми братьями и сестрами друг друга.

Предпочтительно чистый CSS решение

Answer 1

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

.parent { 
 
    display: flex; 
 
    margin-bottom: 1em; 
 
} 
 
.big { 
 
    height: 100px; 
 
    border: 1px solid grey; 
 
    background: lightblue; 
 
    flex: 1 0 auto; 
 
} 
 
p { 
 
    white-space: nowrap; 
 
    ; 
 
} 
 
.box { 
 
    flex: 0 1 33%; 
 
    border: 1px solid grey; 
 
}

<div class="parent"> 
 
    <div class="big"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
    </div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="big"> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    </div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Answer 2

Вы можете сделать это с помощью JavaScript, см скрипку: https://jsfiddle.net/hzkwxo3q/1/

HTML

<div id="col1" class="col1"> 
    <h1> 
Dynamic 
</h1> 
</div> 
<div id="col2" class="col2"> 
    <h1> 
33% 
</h1> 
</div> 
<div id="col3" class="col3"> 
    <h1> 
33% 
</h1> 
</div> 
<div id="col4" class="col4"> 
    <h1> 
33% 
</h1> 
</div> 

CSS

body { 
    margin: 0px; 
} 

.col1, 
.col2, 
.col3, 
.col4 { 
    min-width: 20%; 
    height: 400px; 
    float: left; 
} 

.col1 { 
    background-color: lightgreen; 
} 

.col2 { 
    background-color: lightblue; 
} 

.col3 { 
    background-color: lightgrey; 
} 

.col4 { 
    background-color: lightyellow; 
} 

Javascript

var width = document.getElementById('col1').clientWidth; 
    var w = window.innerWidth; 

    var extraSpace = (w - width) * 0.333; 


    document.getElementById("col2").style.width = extraSpace + "px"; 
    document.getElementById("col3").style.width = extraSpace + "px"; 
    document.getElementById("col4").style.width = extraSpace + "px"; 

Answer 3

Вы также можете сделать это с JS

$(window).on("resize", function() { 
 
    var big = $('.big').outerWidth(); 
 
    var rest = ($(window).width() - big)/3; 
 
    $('.other').outerWidth(rest); 
 
}).resize();

* { 
 
    box-sizing: border-box; 
 
} 
 
body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.big { 
 
    white-space: nowrap; 
 
    background: lightgreen; 
 
} 
 
.column { 
 
    border: 1px solid black; 
 
    padding: 15px; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="column big">Lorem ipsum dolor sit amet, consectetur adipisicing.</div> 
 
    <div class="column other">Lorem</div> 
 
    <div class="column other">Lorem</div> 
 
    <div class="column other">Lorem</div> 
 
</div>