Question

我希望有两个列（内容和边框），其中sidebox将具有固定的宽度，内容将缩小为必要的。

在某些时候，它们都会叠加到100％宽度，但我希望首先拥有内容。这个解决方案的问题是边箱首先出现。

我不想使用花车和百分比，因为我不想缩小侧箱。

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

您可以使用以下内容：

＆＃13;

.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;
    }
}

＆＃13;

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

＆＃13;

Updated Fiddle

Answer 2

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

<强> 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

css两列 - 一个固定宽度

2 个答案: