3

我试图用我的代码实现以下目标：我想要一个 div 容器，div#title-box，它是居中的。在那个 div 容器内，我想要 3 个其他 div 容器，div#logo、div#title、div#subtitle（查看代码以了解它们的显示方式）

现在实际问题： div#logo 有一个给定的宽度，但其他两个没有，它们浮动。我怎样才能让 div#title-box 环绕其他三个 div，但同时保持居中。我看到的另一个问题是 div#title-box 不能有固定的宽度。

有任何想法吗。谢谢！

编辑：必须修改下面的代码，以便 div#title-box 环绕其他 div 并保持居中。

如果有人需要使用代码，这里有一个完整的例子：

<!DOCTYPE html>
<html>
<head>
<style>
   div#title-box {
   max-width: 500px; 
   display: block;
   height: 600px;
   margin: 0 auto;
   position: relative;
   }

   div#logo {
   padding: 0;
   margin: 0;
   position: absolute;
   top: 100px;
   left: 5px;
   width: 100px;
   height: 100px;
   overflow: auto;
   background: #ff0000 no-repeat;
   background-size: 100% 100%;
   border-radius: 15px;
   float: left;
   }

   div#title {
   padding: 0;
   margin: 0;
   position: absolute; 
   left: 110px;   
   top: 100px;
   bottom: 20px;
   right: 10px;
   overflow: auto;
   float: left;
   }

   div#subtitle { 
   padding: 0;
   margin: 0;
   position: absolute;    
   top: 140px;
   bottom: 20px;
   right: 10px;
   left: 110px;
   overflow: auto;
   float: left;
   }


</style>
</head>
<body>
<div id="title-box">
  <div id="logo">
  </div>  
  <div id="title">
    <h1>Hello</h1>
  </div>  
  <div id="subtitle">
    <h3>A A A A A A A A A A A A A A A!</h3>
  </div> 
</div>

4

3 回答 3

0

尝试一些类似的东西

   div#title-box {
       width: 500px; 
       display: inline-block;
       height: 600px;
       margin: 0 25%;
       position: relative;
       left:-250px;

   }
于 2013-03-31T16:44:21.523 回答
0

申请时

position: absolute

对于您的代码，它将被排除在 DOM 上下文的其余部分之外。

我已经修改了您的 CSS：http: //jsfiddle.net/asBmS/。您的包装 div 现在应该始终包含子 div。这是你想要的吗？

于 2013-03-31T17:05:49.757 回答
0

我能想到的最好的建议是更多的“黑客”，如果您更改内容的宽度，则需要对其进行调整。看看这个链接，看看偏移边距，它把所有东西都放在中间。您可能需要进一步调整它以满足您的需求。

http://jsfiddle.net/asBmS/15/

#logo,#title,#subtitle{
    /*offset hack*/
    margin-left: 10% !important;
}
于 2015-07-29T12:07:58.640 回答