1

我已经尝试了各种各样的方法来尝试让它工作，我对 html 标记有点过时了，所以请原谅我，但我相信我的问题很容易解决。我有 2 个 div（1 个图像徽标和 1 个闪光对象火焰) 我想在一个容器 div 中居中，我希望以任何浏览器屏幕分辨率为中心。我还希望水平滚动条仅在浏览器窗口宽度低于 800px 时出现，因此容器 div 上的 min-width:800px （这工作正常）。我的孩子 div 不断出现在彼此的上方和下方，当我将它们设置为绝对定位时，它们只会出现在彼此顶部的左侧.....我只希望所有内容都居中对齐，并且两个 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;
}
4

3 回答 3

0

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 居中。您也可以通过此链接了解如何执行此操作。

编辑：或者，如果您知道徽标和 Flash 横幅的宽度之和，我认为您知道，您可以创建一个宽度等于总和的 div 并对其应用 margin:auto 属性。涉及使用额外的 div 和有关徽标和 Flash 横幅宽度的先验知识，但我认为这将适合您的目的。希望这可以帮助。:)

于 2012-10-19T18:49:04.763 回答
0

最终版本

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

  • 有两个宽度不同的元素在一行中并排对齐
  • 该行应始终作为标题居中
  • 只有当屏幕小于 800px 时才会出现水平滚动条
  • 不可见的边缘在左侧和右侧被修剪

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

在 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;
}

关于“如何运作”

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

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

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

由于中间的容器居中，因此两个元素也将居中。并且由于wrapper' 的溢出被隐藏，两个边缘都将在视口的末端被切断。没有任何可见的滚动条。

最后，只剩下一件事：min-width:800px在<body>-tag 上设置，以便滚动条在窗口小于800px时立即可见。

第一个答案

position: absolute将元素从父母流中取出，除非您position明确设置父母：

.container {
    position: relative;
}

这应该可以解决问题，但它没有使用您的标记对其进行测试。

于 2012-10-19T14:40:02.610 回答
0 
.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;
}
}
于 2012-10-19T14:42:20.840 回答