Question

所以我和我的问题一直在这个街区（不是听起来像是我某种发牢骚的流氓）;我遇到困难的事情是试图找出将两个div相邻的最佳方法，一个具有固定宽度，另一个具有百分比宽度以填充剩余量。 / p>

我的HTML代码是这样的：

<div class="wrapper">
        <div class="sidebar">
        </div>
        <div class="content">
            <div class="tile">
                <h1>Catalogs</h1>
                <p>1</p>
            </div><!--
            --><div class="tile">
                <h1>Products</h1>
                <p>2</p>
            </div><!--
            --><div class="tile">
                <h1>Specifications</h1>
                <p>3</p>
            </div><!--
            --><div class="tile">
                <h1>New Products</h1>
                <p>4</p>
            </div>
        </div>

        <div style="clear:both"></div>
    </div>

我的CSS：

@charset "utf-8";
/* CSS Document */
/* WEB FONTS

font-family: 'Ubuntu', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Francois One', sans-serif;

*/
body {
    background-color:#191919;
    margin: 0 auto;
    overflow:hidden;
    font-family: 'Ubuntu', sans-serif;
}
.wrapper{
    width: 100%;
    min-height: 900px;
    margin: 0 auto;
}
.sidebar{
    width: 20%;
    height: 100%;
    float: left;
    color:white;
    background-color:#191919;
    margin:0 auto;
    display: block;

}
.content{
    width: 80%;
    height: 1000px;
    float: right;
    color:white;
    background-image:url(Assets/background1.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin:0 auto;
}
.tile{
    width: 25%;
    height: 100%;
    display:inline-block;
    margin: 0 auto;
    color:white;
    background-color:rgba(0,0,0,0.7);
    transition: opacity 1s;
    opacity: .3;
    float: left;
}
.tile:hover {
    opacity: 1; 
}
.tile h1{
    font-family: 'Francois One', sans-serif;
    background-color:rgba(110,0,1,0.77);
    width: 100%;
    height: 50px;
    text-align:center;
    line-height: 50px;
}
.tile p{

}
#item {
    padding-left: 25px;
    font-family: 'Francois One', sans-serif;
}
a {
    color:white;
    text-decoration:none;
}

这是我在纯CSS中完成的布局。我的问题是我希望我的侧边栏菜单的固定宽度为400px，并且旁边的内容填充了＆＃39; x＆＃39;的剩余空间。像素。如果我将页面缩小到足够的程度，侧边栏中的文本会重叠。这就是我希望修复它的原因。

我对这个问题的解决方法是使用jquery：

function widthAdjuster(wrapper, sidebar, content, tile){
    var wrapperWidth = $(wrapper).width();
    var sidebarWidth = $(sidebar).width();
    var newWidth = wrapperWidth - sidebarWidth;
    var newWidgetWidth = newWidth/4;

    $(content).css("width", newWidth);
    $(tile).css("width", newWidgetWidth);
}

function masterFunc(){
    widthAdjuster('.wrapper','.sidebar','.content','.tile');
    $(window).resize(widthAdjuster('.wrapper','.sidebar','.content','.tile'));
}

这基本上会自动为我设置内容的宽度，也可以调整每个图块的宽度。然后在调整大小时，它将重新运行该函数并调整每个tile的大小。现在，我的问题是，我可以在CSS中执行此操作，以便我不会因为使用JQuery调整Code Review的宽度而让我大吼大叫吗？

Answer 1

我之前已经实现了这一点，将你的css改为：

<style>
body {
background-color:#191919;
margin: 0 auto;
overflow:hidden;
font-family: 'Ubuntu', sans-serif;
}
.wrapper{
width: 100%;
min-height: 900px;
margin: 0 auto;
}
.sidebar{
width: 20%;
height: 100%;
float: left;
color:white;
background-color:#191919;
margin:0 auto;
display: block;

}
.content{

height: 1000px;
float: right;
color:white;
background-image:url(Assets/background1.png);
background-size: cover;
background-repeat: no-repeat;
margin:0 auto;
}
.tile{
width: 25%;
height: 100%;
display:inline-block;
margin: 0 auto;
color:white;
background-color:rgba(0,0,0,0.7);
transition: opacity 1s;
opacity: .3;
float: left;
}
.tile:hover {
opacity: 1; 
}
.tile h1{
font-family: 'Francois One', sans-serif;
background-color:rgba(110,0,1,0.77);
width: 100%;
height: 50px;
text-align:center;
line-height: 50px;
}
.tile p{

}
#item {
padding-left: 25px;
font-family: 'Francois One', sans-serif;
}
a {
color:white;
text-decoration:none;
}
.sidebar{
width:400px;
float:left;
margin:0 -400px 0 0;

}
.content{
position:absolute;
right:0;
left:400px;
}
</style>

Answer 2

不确定您的浏览器要求是什么，但使用css flexbox，您可以使用纯css实现它。

http://caniuse.com/#feat=flexbox https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

将固定宽度div放置在浮动＆＃34;百分比＆＃34;旁边。 DIV？

2 个答案: