css：如何在左侧以最小间距构建居中的div [英] css: how to build centered div with minimum spacing on the left
问题描述
因此，过去几天我试图做到以下几点：
想法是有一个div（红色）最终居中（使用margin：auto;），并且在同一级别x轴）另一个具有固定大小（蓝色）的div。
在一个足够大的显示屏上，最大化，看起来很棒。
现在有趣的部分是当屏幕较小和/或调整窗口大小时。由于自动保证金，其中一个div与另一个div重叠：
这就是我想要阻止的。 （解释：红色是菜单，蓝色是标志）
所以第一个想法是将红色div所需的蓝色div的像素向右移动，使用padding-left：?? px;
但是，这使得红色div不再居中，但是向右填充了px。形象地集中在一个额外的盒子（灰色）。
第二个想法是在红色右侧创建另一个（透明）div。但这使得整个网站的最小宽度变得越来越没有限制：
这两个div右侧和左侧的像素总和时）。
所以我想要的是：
两个div，不重叠（即使在调整大小时），正确的大小，左边的窗口的中心，而不创建鬼格，在低分辨率上创建空白空间。
哦，如果可能的话请不要使用javascript。
我希望我的解释有助于我的想法。
，我还希望有一个好主意或有一个被忽视的功能的人可以帮我解决问题。 它回来了...这是可能的...有很多黑客编码... ...
$ b
http://jsfiddle.net/7myd4/2/show
你会找到代码和演示。它涉及一个包装，填充，相对定位和一个非常黑客的布局。 ：P
编辑：
回头看这个答案从两年前...我得出结论，这个答案是可怕的。
我已经更新了代码示例和一个新的演示（仅限于不同的是格式变化和将内联样式移动到类）
HTML
< div class =firstdiv>< / div>
< div class =seconddiv>
< div class =innerdiv>< / div>
< / div>
CSS
body {
padding：10px 0px;
}
.firstdiv {
background-color：#ddd;
位置：固定;
left：0px;
width：200px;
height：200px;
}
.seconddiv {
margin：0 auto;
width：300px;
height：150px;
padding-left：400px;
职位：亲属;
left：-200px;
}
.innerdiv {
background-color：#ccc;
width：300px;
height：150px;
b
演示： http://jsfiddle.net/7myd4/55/show
来源： http://jsfiddle.net/7myd4/55/
so the past days i tried to achieve the following:
the idea being to have a div (red) that is ultimately centered (using margin:auto;), and on the same level (x-axis) another div that has a fixed size (blue).
on a huge enough display, maximized, it looks great.
now the fun part is when having a smaller screen and/or resizing the window. because of the auto margin, one of the divs overlaps the other:
this is what i want to prevent. (in explanation: red being the menu, blue being the logo)
so the first idea was to shift the red div the needed pixels of the blue div to the right, using padding-left:??px;
but that makes the red div no longer center itself absolutely, but padded ??px to the right. figuratively centered in an extra box (grey).
second idea being to create another (transparent) div on the right of the red div. but that makes the min-width of the whole site become out of bound:
in other words: the scroll bar becomes visible far to early. it's ought to appear just when the window is smaller than the sum of pixels of the red and blue div together. and not, like in img 4, where it appears just when the window is smaller than the sum of pixels of the red div and both divs right and left from it).
so what i want is that:
two divs, not overlapping (even when resizing), the right one at a fixed size, the left one in the center of the window, whithout creating a ghost div, creating blank space on low resolutions.
oh and please no javascript, if possible.
i hope my explanations helped a bit getting my idea.
and i furthermore hope someone with a great idea or with an overlooked feature can help me out.
解决方案 I take it back... it's marginally possible... with a lot of hackish coding...
http://jsfiddle.net/7myd4/2/show
There you will find the code and the demo. It involves a wrapper, padding, relative positioning, and a really hackish layout. :P
EDIT:
looking back at this answer from over two years ago... I've come to the conclusion that this answer is terrible.
I've updated it with code samples and a new demo (only thing different is formatting changes and moving inline styles to classes)
HTML
<div class="firstdiv"></div>
<div class="seconddiv">
<div class="innerdiv"></div>
</div>
CSS
body{
padding:10px 0px;
}
.firstdiv {
background-color:#ddd;
position:fixed;
left:0px;
width:200px;
height:200px;
}
.seconddiv {
margin:0 auto;
width:300px;
height:150px;
padding-left:400px;
position:relative;
left:-200px;
}
.innerdiv {
background-color:#ccc;
width:300px;
height:150px;
}
Demo: http://jsfiddle.net/7myd4/55/show
Source: http://jsfiddle.net/7myd4/55/
这篇关于css：如何在左侧以最小间距构建居中的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
