Question

我已经尝试了一段时间以使div居中并防止它在更高分辨率（1920 x 1200及以上）上溢出，我尝试添加width:auto或使用定位但没有任何工作因此我希望有人可以指出我正确的方向。

这是我的div：

这就是更高分辨率所发生的事情：

这个div在另一个div中，所以这里它们都是css和html：

/*Parent*/
.main-graphic-container {
    border-radius: 5px;
    padding-right: 75px;
    padding-left: 75px;
    padding-bottom: 35px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #ebebeb;
}

/*Child*/
.feature-container {
    height: 80px;
    position: absolute;
    z-index: 1;
    margin-top:80px;
    margin-left:45px;
    padding-top: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    background-color: #ffffff;

}

<div class="container main-graphic-container"> 
    <div class="row">

    ...

    </div>
    <!-- end row -->

<!-- Child container so troublesome-->
<div class="container "> 
    <div class="row">
        <div class="center-block">
            <h1 class="greyText col-md-8 col-md-offset-2">LOREM IPSUM DOLOR SIT AMET.  </h1>
            <!-- Title -->

            <!-- Info container -->
        <div class="col-md-8 col-md-offset-1 feature-container">

            <!-- Left -->
            <div class="col-md-6">
                <h4 class="bold blue-title text-center">Lorem ipsum</h4>
            </div>

            <!-- Right -->
            <div class="col-md-6">
                <h4 class="grey-title">Lorem ipsum</h4>
            </div>

        </div>

        </div> 
    </div>
</div>

非常感谢任何反馈。

Answer 1

在这种情况下，一个工作小提琴将有助于确切了解发生了什么。

然而，有些事情突然发生在我身上：

假设这是bootstrap CSS，您永远不需要嵌套的.container元素。如果我没有弄错的话，.container会给你一个固定的宽度，占据屏幕的大部分，所以你不应该有这样的两个。
为什么.feature-container绝对位置？它没有使用top，bottom，left或right ...它是如何定位的？它只是试图在其父母之外展示吗？只需使用负边距，overflow: visible如果它被剪裁。

Answer 2

您的代码几乎没有任何改进。请针对您的问题尝试以下代码。

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<style type="text/css">
  /*Parent*/
.head{
  background-color: #eee;
  padding: 3rem;
  text-align: center;
}

.sub-contain{
  border:1px solid #000;
  padding: 2rem;
  background-color: #fff;
  top: -45;
  text-align: center;
}
</style>
<body>
<div class="container"> 

<div class="head">
<h1>LOREM IPSUM DOLOR SIT AMET.  </h1>
</div> <!--head-->

<div class="col-md-8 col-md-offset-2 sub-contain">
<div class="col-md-6">
<h4 class="bold blue-title text-center">Lorem ipsum</h4>
</div>

<div class="col-md-6">
<h4 class="grey-title">Lorem ipsum</h4>
</div>
</div>

</div><!--cont-->
</body>
</html>

＆＃13;

Div在更高分辨率下溢出

2 个答案: