css两列 - 一个固定宽度

Question

我想要有两列（内容和侧盒），其中sidebox将具有固定的宽度，并且内容将缩小为必要的。

在某些时候，他们都会堆叠到100％的宽度，但我想先拥有内容。这个解决方案的问题是sidebox最先出现。

我不想使用浮动和百分比，因为我不想缩小边框。

HTML：

<aside class="sidebox"> <!-- i don't want this to come first after media query applied --> 
     sidebox 
    </aside> 
    <section class="content"> 
     content 
    </section> 

CSS：

.content { 
    margin-right:200px; 
    height:100px; 
    background-color:red; 
} 

.sidebox{ 
    width:180px; 
    float:right; 
    height:100px; 
    background-color:yellow; 
} 


@media (max-width: 500px) { 
    .sidebox { 
     float:none; 
     width: auto; 
    } 
    .content { 
     margin-right:0px; 
     } 
} 

DEMO：https://jsfiddle.net/72Lad2zf/

Answer 1

您可以使用以下方法：

.container { 
 
    display:table; 
 
    width:100%; 
 
} 
 
.content { 
 
    display:table-cell; 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
.sidebox { 
 
    display:table-cell; 
 
    width:180px; 
 
    height:100px; 
 
    background-color:yellow; 
 
} 
 
@media (max-width: 500px) { 
 
    .content, .sidebox { 
 
     width:100%; 
 
     display:block; 
 
    } 
 
}

<div class="container"> 
 
    <section class="content">content</section> 
 
    <aside class="sidebox">sidebox</aside> 
 
</div>

Updated Fiddle

Answer 2

您需要更改HTML结构并且需要在.content中使用float，但float不缩小宽度。

HTML

<section class="content"> 
    content 
</section> 
<aside class="sidebox"> 
    sidebox 
</aside> 

CSS

.content { 
    height:100px; 
    background-color:red; 
    float:left; 
    width:calc(100% - 200px); 
} 

working Demo