Question

我试图实现一个简单的结构，但我正在努力解决这个问题。

我有aside，其固定宽度为255px。我有main我希望占据剩余宽度的100％（在aside的255px之后）。该网站没有包含宽度，旨在填充整个屏幕空间。有人能够提供帮助，这里是a jsFiddle。

HTML：

<aside>
    <p>Text</p>
</aside>
<main>
    <p>Main Text</p>
</main>

CSS：

body { margin: 0; padding: 0; }
aside { width: 255px; float: left; background: red; }
main { width: 100%; float: left; background: blue; }

我确定它很简单，我确定我接近错误的方式，但任何帮助都会受到赞赏！

Answer 1

从main移除浮动，或者从旁边和主要移动％。

＆＃13;

body { margin: 0; padding: 0; }
aside { width: 30%; float: left; background: red; }
main { width: 70%; float: left; background: blue; }

＆＃13;

<aside>
    <p>Text</p>
</aside>
<main>
    <p>Main Text</p>
</main>

＆＃13;

解决方案2：将蓝色背景应用于身体。这样，主要赢得了一个大问题。

＆＃13;

body { margin: 0; padding: 0; background-color: blue; }
aside { width: 255px; float: left; background: red; }
main { width: auto; padding-left: 100px ; float: left; background: inherot; }

＆＃13;

<aside>
    <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
</aside>
<main>
    <p>Main Text</p>
   <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
 <p>Text</p>
</main>

＆＃13;

Answer 2

有3种不同的解决方案。我认为你最想要的那个绝对是把它放在一边，并在主要部分应用保证金：

＆＃13;

body { margin: 0; padding: 0; }
.container{position:relative;}
aside { width: 255px; position:absolute; background: red; }
main { margin-left: 255px; background: blue; }

＆＃13;

<div class="container">
    <aside>
        <p>Text</p>
    </aside>
    <main>
        <p>Main Text</p>
        <p>Main Text</p>
        <p>Main Text</p>
    </main>
</div>

＆＃13;

其他几个人提到杀死主要的浮动，这将起作用，但主要的溢出内容将包在一边，我不相信你想要的。

＆＃13;

body { margin: 0; padding: 0; }
aside { width: 255px; float: left; background: red; }
main { width: 100%; background: blue; }

＆＃13;

<aside>
    <p>Text</p>
</aside>
<main>
    <p>Main Text</p>
    <p>Main Text</p>
    <p>Main Text</p>
</main>

＆＃13;

第三种解决方案不再起作用，因为255px不是一个硬性要求，但它是：

＆＃13;

body { margin: 0; padding: 0; }
.container {width: 100%; background: blue; overflow:hidden;}
aside { width: 32%; float: left; background: red; }
main { width: 67%; float: left;  }

＆＃13;

<div class="container">
    <aside>
        <p>Text</p>
    </aside>
    <main>
        <p>Main Text</p>
        <p>Main Text</p>
        <p>Main Text</p>
    </main>
</div>

＆＃13;

Answer 3

从float删除main可以解决问题，我还在padding上添加了一些main p：

aside { 
    width: 255px; 
    float: left; 
    background: red; 
}

main { 
    width: 100%; 
    background: yellow; 
}

main p { 
    padding: 15px; 
}

使用px和amp;时浮动元素不起作用％

3 个答案: