集装箱全宽

首先为标题没有真正明确集装箱全宽

对不起，这里是我的问题：我已经容器，它里面一个侧边栏是280像素，我想使主页全宽度。但是，如果我写这样的东西

.container { 
    width: 100%; 

    .sidebar { 
    width: 280px; 
    } 

    .home { 
    width: 100%; 
    } 
}

主页在底下，我想把侧边栏放在一边。但我不知道该怎么做

来源

2017-08-15 Mavrick RMX'

你的意思是make '家'div占据了剩余的空间？目前还不清楚你在问什么。 –

可能的重复 - https://stackoverflow.com/questions/1260122/expand-a-iv-to-take-the-remaining-width –

您能否提供一个工作片段？ –

下面是使用0 CSS溶液到minus的.sidebar width从.home

#container { 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 

 
#container .sidebar { 
 
    width: 280px; 
 
    height: 100%; 
 
    background: blue; 
 
    display: inline-block; 
 
    color:#fff; 
 
} 
 

 
#container .home { 
 
    width: calc(100% - 285px); 
 
    height: 100%; 
 
    background: yellow; 
 
    display: inline-block; 
 
}

<div id="container"> 
 
    <div class="sidebar">SideBar</div> 
 
    <div class="home">Home</div> 
 
</div>

来源

2017-08-15 12:08:34 frnt

太棒了！它的效果很好。谢谢你 –

欢迎@MavrickRMX':-) – frnt

下面创建一个侧边栏与280像素的固定宽度和DIV（。家里）与流体宽度：

SCSS

.container { 
    width: 100%; 
    overflow:hidden; 

    .sidebar { 
    float:right; /* or float:left for left sidebar */ 
    width:280px; 
    } 

    .home { 
    margin-right:280px; /* or margin-left for left sidebar */ 
    } 
}

HTML

<div class="container"> 
    <div class="sidebar"> 

    </div> 
    <div class="home"> 

    </div> 
</div>

来源

2017-08-15 12:05:23 kinggs

而且投票的理由是什么？ – kinggs

这应该工作： https://jsfiddle.net/0bsygLsh/

.container { 
    width: 100%; 
    overflow:hidden; 

    .sidebar { 
    width:280px; 
    display:inline-block; 
    float:left; 
    } 

    .home { 
    width:auto; 
    } 
}

来源

2017-08-15 12:13:25 pryolo

好像你需要了解的CSS 显示属性。这也许是处理CSS时最重要的事情。请看这里https://www.w3schools.com/cssref/pr_class_display.asp

下面是使用display: flex解决您的问题的示例。虽然你的问题可以通过几种方式解决。考虑尝试使用display: inline。

.container { 
 
    display: flex; 
 
    height: 100vh; 
 
} 
 

 
.sidebar { 
 
    flex-basis: 100px; 
 
    background-color: red; 
 
} 
 

 
.home { 
 
    flex: 1; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="sidebar"> 
 
    I'm the sidebar 
 
    </div> 
 
    <div class="home"> 
 
    I'm the home page 
 
    </div> 
 
</div>

来源

2017-08-15 12:14:15 Normangorman

是的，我会的。大多数情况下，我只使用'inline'，'inline-block'作为'display'属性。这就是为什么我没有意识到这一点感谢您的知识！:) –

如果你想使家庭DIV全宽度和侧边栏DIV应该是在它的上面，则CSS将以下内容：

.container { 
     width: 100%; 
     position: relative; 
    } 
    .sidebar { 
     width: 280px; 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 

    .home { 
     width: 100%; 
     padding-left: 280px; 
    }

或者，如果你想要保持它们并排，那么css应该如下：

.container { 
     width: 100%; 
} 
.container:after { 
    display: table; 
    content: ""; 
    clear: both; 
} 
.sidebar { 
    float: left; 
    width: 280px; 
} 

.home { 
    float: left; 
    width: calc(100% - 280px); 
}

来源

2017-08-15 12:21:42 Shuvo

回答

相关问题