居中在另一个较窄的DIV宽DIV

我有两个div，一个嵌套在另一个。主div有css属性max-width:100%，所以它不能比用户屏幕更宽。现在，第二个div非常宽（1400px），并且包含很多其他元素，但不是所有的边缘都需要被看到。所以，如何（理想情况下没有Javascript）可以在第一个div中居中显示第二个宽div，这样当用户屏幕宽度只有1000px，而不是显示宽div的第一个1000px而剩余的已剪裁时，有200px从左侧和右侧裁剪，1000px被从中心取走？居中在另一个较窄的DIV宽DIV

CODE

<div style="max-width:100%"> 
    <div style="position:relative;width:1400px"> 
     <!-- PICTURES, LINKS, ETC --> 
    </div> 
</div>

来源

2013-08-30 topherg

你可以张贴一些代码，或显示你已经试过什么的例子吗？这听起来像你只是想能够在另一个'div'中放置一个'div'。 – kunalbhat

你可以用一种叫做收缩包装实现这一目标。您将需要一个额外的div来包装大型内部div，将其拉向左侧。内部div可以自行纠正，并将其自身向右拉到与其容器相比的右侧。这应该有你想要的效果。

<div class="max-width-container"> 
    <div class="shrink-wrap"> 
     <div class="very-wide-inner-div"></div> 
    </div> 
</div> 

.shrink-wrap { 
    float: right; 
    position: relative; 
    left: -50%; 
} 
.very-wide-inner-div { 
    position: relative; 
    left: 50%; 
    width: $some_huge_number; 
}

http://jsfiddle.net/2j2mh/

来源

2013-08-30 14:17:56

假设你的HTML看起来像这样：

<div class="narrow"><div class="wide">blah de blah</div></div>

认为你可以像这样的东西做到这一点：

.narrow {width:1000px; overflow:hidden;} 
.wide {width:1400px; position:relative; left:50%; margin-left:-700px;}

的margin-left是宽度的一半格

，如果你检查的小提琴元素，你会看到它是坐在中间

http://jsfiddle.net/peteng/dtNKr/4/

来源

2013-08-30 14:16:44 Pete

居中在另一个较窄的DIV宽DIV

回答

相关问题