CSS div放置
首先，请参考下图： 这基本上是我对布局的想法 我想要的是：CSS div放置,css,html,placement,Css,Html,Placement,首先，请参考下图： 这基本上是我对布局的想法 我想要的是： 内容div将成为“主要焦点”，例如，当浏览器 调整大小，它应该停留在中间； 在调整浏览器大小时，我希望这两个图像基本上相同 落在内容部分下面。（不完全确定如何解释 这一点，但我希望你能理解） 浏览器可能（也将）比 1400px（200+1000+200），在这种情况下，我希望左边的图像 尽可能向左粘贴，右图也是如此 尽量向右贴 我也不希望在浏览器运行时出现侧滚动条 调整大小。（或者更确切地说，宽度小于1400px） 这些都是我目前能
- 内容div将成为“主要焦点”，例如，当浏览器 调整大小，它应该停留在中间；<李>
- 在调整浏览器大小时，我希望这两个图像基本上相同 落在内容部分下面。（不完全确定如何解释 这一点，但我希望你能理解）
- 浏览器可能（也将）比 1400px（200+1000+200），在这种情况下，我希望左边的图像 尽可能向左粘贴，右图也是如此 尽量向右贴
- 我也不希望在浏览器运行时出现侧滚动条 调整大小。（或者更确切地说，宽度小于1400px）
例如，这看起来与我想要完成的非常接近，但首先content div没有居中，每当我调整它的大小时，它仍然会聚焦在左边的图像上 我会这样做的。。。我不是说这是最好的解决方案。我觉得CSS媒体查询还没有得到足够的支持，所以我整理了这个jQuery的小片段来帮助我 顺便说一句，我不是最好的jQuery程序员，所以可能有更好的方法来实现同样的结果（欢迎来自更好的jQuery程序员的反馈！） 这是HTML
<body>
<div id="one">Content in here</div>
<div id="two">Content in here</div>
<div id="three">Content in here</div>
</body>
希望这能为您提供一个起点？您想给我们一个您一直在开发的代码的示例，该代码可能已经接近结果了吗？我认为您正在寻找的单词是“responsive”。可根据正在查看的屏幕宽度进行调整的模板。有两种方法可以实现这个结果，一种是使用javascript（例如jQuery）和CSS，另一种是使用CSS媒体查询。试着用谷歌搜索其中一些短语，看看你能找到什么。对不起，我花了一段时间才把代码加进去。我在这里格式化失败。上面的例子看起来非常接近我想要的，但是它没有按照我想要的方式工作。我也有点理解为什么它没有，但我不知道如何修复它。还有，我可以用谷歌搜索一下你提到的一些东西。谢谢，呃。我真的弄糊涂了。我确实觉得我上面发布的代码只需要一些非常简单的调整，但我无法理解。我一直在看那些响应模板，它们非常酷。然而，找不到一个能满足我需要的，我有点害怕和他们混在一起，因为我是一个css新手，他们看起来有点。。。很棘手。对不起，我不是建议你使用现成的模板，更多的是你在谷歌上搜索一下“响应模板”和“CSS媒体查询”。如果你是一个CSS新手，那么你可能想看看responive框架（这里给出了一个示例列表）之类的东西，因为如果你还不熟悉CSS，响应式CSS很难让你清醒过来。。。我很感激这不能完全回答你的全部问题。我没有测试你的CSS上面，但在一个快速检查它看起来不错。我认为你的CSS技能可能足够好，可以得到你想要的初始布局-你可以用这个答案来帮助你把它变成一个响应性的布局。一般的想法是，当页面变得太小时，开始移除元素的浮动和宽度。嗯，虽然答案很精彩，但也很有趣。非常正确，@YaMo，不过我指的更多的是在archaic 15上使用Internet Explorder 6或Nutsrave（对不起，NetScape）的人“1024甚至800宽的显示器。。。我们都知道有些客户仍然生活在黑暗时代：）更通用的媒体查询支持列表。。。这就是问题所在，支持旧浏览器并不能给那些生活在黑暗时代的人一个更新浏览器的借口。
<div id="backgroundimages">
<div id="imageleft"></div>
<div id="middlecontent"></div>
<div id="imageright"></div>
</div>
<body>
<div id="one">Content in here</div>
<div id="two">Content in here</div>
<div id="three">Content in here</div>
</body>
$(document).ready(function(){
var reportWidth = true;
if (reportWidth){
$('body').append('<div id="reportWidth">');
$('#reportWidth').css({
position:'fixed',
bottom:0,
left:0,
right:0,
backgroundColor:'#666666',
color:'#ffffff'
})
}
var breakpoint=new Array();
breakpoint.push(320); // iPhone 4 & 5 in portrait
breakpoint.push(480); // iPhone 4 in landscape
breakpoint.push(568); // iPhone 5 in landscape
breakpoint.push(768); // iPad in portrait
detectViewportWidth(breakpoint,reportWidth);
$(window).resize(function(){
detectViewportWidth(breakpoint,reportWidth)
});
});
function detectViewportWidth(breakpoint,reportWidth){
var htmlClassPrefix='pageWidth-';
var currentWidth=$(window).width();
var noBreakpoints=breakpoint.length;
var widthClass=noBreakpoints+'-'+(noBreakpoints+1);
$('html').removeClass(htmlClassPrefix+widthClass);
var previousArrayVal=0;
$.each(breakpoint,function(arrayKey,arrayVal){
$('html').removeClass(htmlClassPrefix+arrayKey+'-'+(arrayKey+1));
if (currentWidth<=arrayVal && currentWidth>previousArrayVal){
widthClass=arrayKey+'-'+(arrayKey+1);
}
previousArrayVal=arrayVal;
});
$('html').addClass(htmlClassPrefix+widthClass);
if (reportWidth){
$('#reportWidth').text(htmlClassPrefix+widthClass);
}
}
div {
border:1px solid #999999;
display:inline-block;
width: 29%;
margin: 0 1%;
}
.pageWidth-0-1 div,
.pageWidth-1-2 div
{
display:block;
width:98%;
}