如何水平居中可变宽度的浮动元素？
编辑:我已经使用了包含div浮动元素并width为容器指定了一个(然后margin: 0 auto;用于容器).我只想知道是否可以在不使用包含元素的情况下完成,或者至少不必width为包含元素指定a .
我想要一个左边有固定宽度图像的div和一个带有背景颜色的可变宽度div,它应该在我的设备上扩展它的宽度100%.我无法阻止第二个div溢出我的固定div.
当我添加溢出:隐藏在可变宽度div时,它只是跳到下一行的照片下面.
我怎样才能以正确的方式解决这个问题(即没有黑客或留下边距,因为我需要稍后通过媒体查询使网站响应,我必须为每个设备更改其他分辨率图像的图像)？
HTML:
<div class="header"></div>
<div class="header-right"></div>
CSS:
.header{
float:left;
background-image: url('img/header.png');
background-repeat: no-repeat;
width: 240px;
height: 100px;
}
.header-right{
float:left;
overflow:hidden;
background-color:#000;
width: 100%;
height: 100px;
}
我无法使以下三列布局工作:
A B C
+-------+-------------------+------------+
| | | |
| Fixed | Use unused space | Resizable |
| | | |
+-------+-------------------+------------+
哪里:
以下是我创建此项目的最佳尝试:http: //jsfiddle.net/x3ESz/
我所看到的所有其他主题都建议将所有三个主题与B一起浮动,使用边距来防止包装,但这不允许C根据C的内容调整B大小(因为必须为B的右边距赋予值).
我也真的想避免使用JS来实现这一目标.
这个问题需要一些解释.请多多包涵:
几个月前,我为一个网站上的一个部分设置了一个由三部分组成的标题.在此标题的左侧有一个标题,其内容可以更改.右侧是徽标,总长150 px宽,60 px高.它们之间是一组双线.像这样的东西:
[这是标题] ======================================= [这里的标志]
该网站是响应式的,因此标题的总宽度是可变的.
标题必须始终在一行.保持双线的div需要改变大小以填充Title和Logo之间的空间.
我最初设置它,以便使用媒体查询和calc()调整行的大小; 功能.但是,网站必须兼容到IE 8,所以我最终编写了一些JS来使其工作.
这是一个JS小提琴,它基本上反映了这种行为:http: //jsfiddle.net/55u5mpu2/2/
function sizeLines() {
var logoSize = document.getElementById("the-logo").offsetWidth;
var titleWidth = document.getElementById("the-h2-Title").offsetWidth;
var totalWidth = document.getElementById("entire-Header").offsetWidth;
var offsetWidth = (logoSize + titleWidth);
var linesWidth = (totalWidth - offsetWidth - 20) + "px";
document.querySelector("#the-lines").style.width = linesWidth; }
window.onresize = sizeLines; #entire-Header{
position: relative;
width: 100%;
height:40px;
}
#the-h2-Title {
position: relative;
float: left;
width: auto;
padding-right: 10px;
}
#the-lines {
border-top: 4px solid #000000 !important;
border-bottom: …我有可变宽度HTML布局,<div>在可变宽度内容的左侧有一个固定宽度的菜单(由css max-width和min-width设置).对于非常狭窄的浏览器窗口,我希望将内容包装在菜单下面,而我目前通过设置float:left菜单和内容来实现此目的.
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 200px; float: left; border: 1px black solid">Menu (200px wide)</div>
<div style="max-width: 800px; min-width: 300px; float:left; border: 1px black solid">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div>
</body>
</html>
在此示例中,div一旦浏览器视口小于1000px(菜单宽度+内容最大宽度),当前就会发生内容的换行.我希望首先减小内容的宽度,并且仅当视口小于500px宽(菜单宽度+内容最小宽度)时才将内容包裹在菜单下方
有没有办法实现这一点,无论是我目前的浮动<div>s 安排,还是其他方式？
css ×5
css-float ×4
html ×2
alignment ×1
centering ×1
fixed-width ×1
layout ×1
overflow ×1
positioning ×1