在更高的分辨率溢出分区

我一直在尝试一段时间，以中心一个div，并保持它在更高的分辨率（1920 x 1200及以上）溢出，我试图增加width:auto或使用定位，但没有任何工作，所以我希望有人可以指引我走向正确的方向。在更高的分辨率溢出分区

这是我的div：

而这正是发生在更高的分辨率：

这个div是另外一个内所以这里它既是CSS和html for both：

/*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>

任何反馈将不胜感激。

来源

2016-07-06 Code Grasshopper

使用媒体查询更改分辨率（1920×1200及以上） –

你试图使用**媒体查询后，你的CSS **了吗？当屏幕分辨率改变时，它们非常适合调整文档的不同元素。以下是您应该检查的一些链接：https：//developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries，http://www.w3schools.com/css/css_rwd_mediaqueries.asp，这里是一个例子：http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints。希望这有助于:) – IchHabsDrauf

@andihamolli谢谢我会研究它。 –

您的代码需要少许改进。请针对您的问题尝试以下代码。

<!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>

来源

2016-07-06 05:32:03

我会检查一下。很多改进？你有任何建议，以避免这类问题。谢谢 –

只需比较两个代码（我的和你的）。如果输出带有小而简单的css而不需要写大的复杂的css。 –

一个工作小提琴将有助于在这种情况下看到究竟发生了什么。

然而，有些事情，我跳出：

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

来源

2016-07-06 05:10:51

是的，我使用绝对位置，因为我想要div在图片中显示的外部。我会尽快尝试你的提示，谢谢。 –

在更高的分辨率溢出分区

回答

相关问题