Question

我已经尝试了各种各样的事情来尝试并使其正常工作，我对html标记有点过时所以请原谅我，但我确信我的问题很容易解决。我有2个div（1个图像徽标和1个flash对象火焰），我想在容器div中居中，我希望以任何浏览器屏幕分辨率为中心。我还希望水平滚动条仅在浏览器窗口低于800px宽时出现，因此最小宽度：800px（这可以正常）在容器div上。我的孩子divs一直出现在彼此的上方和下方，当我将它们设置为绝对定位时，它们恰好出现在彼此的左上方......我只是希望所有内容都集中在一起，并且两个div都在屏幕的顶部，有人可以请帮助并指出我正确的方向。

由于安迪

.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
}
.logo {
margin: 0 auto;
position:absolute;
vertical-align:top;
display:inline-block;
width:1059px;
height:136px;   
}
.flame {
margin: 0 auto;
vertical-align:top;
position:absolute;
display:inline-block;
width:861px;
height:134px;
}

Answer 1

最终版

总结一下 - 任务基本上是这样的：

有两个元素宽度不同的宽度在一行中并排排列
此行应始终作为标题类型
仅当屏幕小于800px时，才会出现水平滚动条
在左侧和右侧修剪不可见边缘

这是一个可能的解决方案：

Try before buy on jsfillde.net

还有一点解释：

HTML标记

<div class="wrapper">
    <div class="center">
        <img src="" alt="">
        <object></object>    
    </div>
</div>

<强> CSS

body, html {
    width: 100%;
    min-width: 800px;
    height: 100%;
    margin: 0;
    padding: 0;
}

div.wrapper {
    width: 100%;
    height: 134px;
    overflow: hidden;
}

div.center {
    position: relative;
    margin:0 auto;
    width: 800px;
    height: 100%;
}

div.center > img {
    position: absolute;
    top: 0;
    left: -499px;
}

div.center > object {
    position: absolute;
    top: 0;
    left: 560px;
}

关于“工作原理”

第一个div wrapper跨越从左侧到右侧的区域。这是始终可见的空间。为了切断边缘，我在该元素上使用了overflow: hidden;。所以突出的一切都将是隐形的。

第二个div center使用margin: 0 auto放置在视口的中间。它有一个固定的宽度。我使用800px，因为这是问题中所需的最小宽度。它也适用于任何其他领域。

现在是时候对齐两个标题元素了。两者都有固定的宽度。在这种情况下，图像是 1059px ，对象是 861px ，使其总共 1920px 。这些元素的中间部分在 960px 处显而易见。我们的容器center实际上位于 400px ，因为页面的最小宽度为 800px 。因此，两个元素的实际会合点在此容器中的 560px ，因为我们有 160px 移位。所以对于对象来说很简单：简单集left: 560px;。但必须放置左侧容器，此时它将结束。我们的宽度为 1059px ，并从 560px 中减去它，得到最终值left: -499px;。

当中间的容器居中时，两个元素也将居中。并且当隐藏wrapper的溢出时，两个边将在视口的末尾被切除。没有任何滚动条可见。

最后，只剩下一件事：在min-width:800px - 标记上设置<body>，以便滚动条尽快显示，因为窗口小于 800px

第一个回答

position: absolute除了您明确设置父position之外，还会将父元素流中的元素移出：

.container {
    position: relative;
}

这应该可以解决问题，但它没有用你的标记测试它。

Answer 2

.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
**position:relative;**
}


@media only screen and (max-width: 800px){
html{
  overflow: auto;
  overflow-y: hidden;
}
}

Answer 3

HTML：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
margin:auto;
width:800px;
height: 500px;
background-color:#F00;
}
.logo {
margin:auto;
float:left;
width:450px;
height:136px;   
background-color:#096;
}
.flame {

margin:auto;
float:left;
width:350px;
height:134px;
background-color:#099;
}
</style>
</head>

<body>

    <div class="container">
        <div class="logo">LOGO GOES HERE</div>
        <div class="flame">FLASH CONTENT GOES HERE</div>
    </div>
</body>
</html>

使用浮动，你可以让你的div叠加在一起。但是，div的宽度之和必须小于或等于容器的宽度，否则第二个div将出现在第一个div的下方。您的容器也将始终以浏览器为中心。此外，如果浏览器的宽度低于800px（容器的宽度），则会出现水平滚动条。最后一点，这个代码使容器居中，但如果浮动元素的宽度之和小于容器的宽度，则不会使div居中。您可以通过此link了解如何执行此操作。

EDITED：或者，如果您知道徽标宽度和闪存横幅的总和，我认为您可以创建一个宽度等于总和的div，并为其应用margin：auto属性。涉及使用额外的div以及有关徽标宽度和flash横幅的先验知识，但我认为这符合您的目的。希望这可以帮助。：）

为什么我的父Div容器中的2个Div不能彼此对齐？

3 个答案: