正如你在下面的CSS中看到的,我希望child2在child1之前定位自己.这是因为我正在开发的网站也应该在移动设备上运行,其中child2应位于底部,因为它包含我想要的导航,在移动设备上的内容之下. - 为什么不是2个主页？这是在整个HTML中重新定位的唯一2个div,因此这个微小变化的2个主页是一种矫枉过正.
HTML:
<div id="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS:
parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
child2具有动态高度,因为不同的子网站可以具有更多或更少的导航项.
我知道绝对定位元素已从流中移除,因此被其他元素忽略.
我尝试设置child2父div,但这没有帮助,clearfix也没有.
我的最后一招将是javascript来相应地重新定位两个div,但是现在我将尝试看看是否存在这样做的非javascript方式.
我搜索了一整天，但找不到我想做的事情的解决方案。我知道这个标题有很多问题，但没有一个对我有用。
我想做的是移动设备的触摸滚动。
这是我的html：
<body>
<div id="slider_container">
<div class="wrapper">
<span>Image</span>
</div>
</div>
</body>
最少有 2 个包含图像的跨度，最多有 10 个包含图像的跨度。会有一些php代码和跨度数会根据用户上传的照片而变化。
这是我的CSS代码：
body
{
width:100%;
overflow-x:hidden;
}
#slider_container
{
width:100%;
height:320px;
overflow: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.wrapper
{
position:absolute;
height:320px;
}
.wrapper img
{
max-width:310px;
max-height:310px;
margin-right:5px;
float:left;
}
我想要的是给 .wrapper 自动宽度并溢出到 #slider_container 和 body 之外。
我希望我能说清楚。
感谢您的所有回答...
我正在尝试理解 css，所以我尽我最大的努力使下面的实验代码尽可能通用。
我有一个简单的页面，有两个框，我希望其中一个框以某种方式定位，根据为什么设置 `right` CSS 属性将元素推向左侧？需要我像这样设置它的位置position:absolute但是，我现在想添加一些低于我的绝对 div 的 div，此外我希望父 div 扩展以适应子 div 的大小。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#outer {
position : relative;
background-color : green;
width : 500px;
height : 500px;
/* overflow : hidden; */
/* I know from working with floating elements inside divs that this works
* to cause parent divs to exand out around floating children, but this
* does not do the same …