[英]Positioning a fixed width div next to a floating “percent” div?
So I've been around the block with my issues (not to sound like I'm some sort of whiny hoodlum); 所以我一直在处理自己的问题(不要听起来像是我在发牢骚)。 the thing that I'm having a hard time with is trying to figure out the best method to float two divs next to each other, one with a fixed width, and the other with a percentage width to fill the remaining amount.
我遇到困难的事情是试图找出最好的方法来使两个div相邻浮动,一个具有固定的宽度,另一个具有一定百分比的宽度来填充剩余的金额。
My HTML Code is like this: 我的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>
And my CSS: 而我的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;
}
This is my layout done in pure CSS. 这是我在纯CSS中完成的布局。 My problem is that I want my sidebar menu to have a fixed width of 400px and be next to content that fills the remaining space of 'x' pixels.
我的问题是我希望侧边栏菜单的宽度固定为400px,并紧靠填充“ x”像素剩余空间的内容。 If I shrink my page down enough, the text from the sidebar div over laps.
如果我将页面缩小得足够小,则侧边栏div上的文字会重叠几圈。 That's why I want it to be fixed.
这就是为什么我希望将其修复。
My solution to this problem was with jquery: 我对这个问题的解决方案是使用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'));
}
This will basically automatically set the width of content for me as well as adjust the width of each tile as well. 基本上,这将自动为我设置内容的宽度以及调整每个图块的宽度。 Then on resize, it will re-run that function and size each of the tiles.
然后在调整大小时,它将重新运行该功能并调整每个图块的大小。 Now, my question is, can I do this in CSS so that I don't have people yelling at me for using JQuery to adjust the width at Code Review?
现在,我的问题是,我可以在CSS中执行此操作,以便没有人为我大喊大叫而使用JQuery在“代码审阅”中调整宽度吗?
I've achieved this before, change your css to this: 我之前已经做到了,将您的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>
Not sure what you browser requirements are, but with css flexboxes you can achieve it with pure css. 不确定您的浏览器要求是什么,但是使用CSS Flexbox,您可以使用纯CSS实现此功能。
http://caniuse.com/#feat=flexbox https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes http://caniuse.com/#feat=flexbox https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Flexible_boxes
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.