所以我一直在解决我的问题(不是说我是个爱发牢骚的流氓);我遇到困难的事情是试图找出使两个 div 相邻 float 的最佳方法,一个具有固定宽度,另一个具有百分比宽度以填充剩余量。
我的 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 完成的布局。我的问题是我希望我的侧边栏菜单具有 400 像素的固定宽度,并且紧挨着填充“x”像素剩余空间的内容。如果我将页面缩小得足够多,侧边栏 div 中的文本就会重叠。这就是我希望修复它的原因。
我对这个问题的解决方案是使用 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'));
}
这基本上会自动为我设置内容的宽度以及调整每个图 block 的宽度。然后在调整大小时,它将重新运行该函数并调整每个图 block 的大小。现在,我的问题是,我是否可以在 CSS 中执行此操作,这样我就不会因为使用 JQuery 调整代码审查中的宽度而对我大喊大叫?
最佳答案
我以前实现过这个,把你的 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>
关于javascript - 将固定宽度的 div 定位在 float 的 "percent"div 旁边?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24791530/