demo

Question

我有一个流体宽度元素（因为屏幕分辨率不同），高度为125像素。我希望它从左边125px，从右边125px。在某种程度上，我猜它是中心的。我怎么能实现这个目标？也许我的问题非常糟糕，但是当我谷歌搜索时，甚至当我搜索stackoverflow时，我都找不到答案。

这里有css（我知道right:125px;不起作用，但我加入了它，让你们有点理解我想要实现的效果？）：

#header {
 position:fixed;
 width:100%;
 height:125px;
 top:0;
 left:125px;
 right:125px;
 text-align:right;
 background:black;
 color:white;
 font-size:100px; }

这里是html：

<div id="header">header</div>

和小提琴：http://jsfiddle.net/k4tefz34/4/ 你非常感谢你们; o;

Answer 1

它工作得很好但只是你已经将宽度定义为100％所以，它会导致从右边显示。只需从100％减去250像素（左值+右值）宽度，然后看到它保持125px和右125px：

#header {
     position:fixed;
     width: calc(100% - 250px);
     height:125px;
     top:0;
     left:125px;
     right:125px;
    text-align:right;
     background:black;
    color:white;
    font-size:100px;
 }

demo

Answer 2

您必须删除宽度：100％。试试这个：

#header {
   position:fixed;
   height:125px;
   top:0;
   left:125px;
   right:125px;
}

Answer 3

改变你的立场不要保持固定

#header {
    position : relative;
    width : 100% ;
    height : 125px;
    top : 0 ;
    left : 125px;
    right : 125px; 
}

Answer 4

如果某件事的宽度为100%，那么你有什么不可取之处是，左边和右边不能有margin

同样，对于fixed div，您无法设置边距

所以你必须减少100%宽度和position（除非你真的需要它）

demo（没有position ）

demo（ position ）

#header {
    position:fixed;
    width:50%; /* anything except 100% */
    height:125px;
    top:0;
    margin-left:125px;
    margin-right:125px;
    text-align:right;
    background:black;
    color:white;
    font-size:100px;
}

Answer 5

你可以使用它 -

 #header {
   background: none repeat scroll 0 0 black;
   color: #fff;
   height: 125px;
   width: 100%;
}
.warp {
   margin: 0 125px 0 126px;
   position: relative;
}

JSFiddle

Answer 6

我认为您应该像这样更改您的HTML代码

html

<div id="header">
   <div class="sub-header">header</div>
</div>

<强> CSS

#header{
    position:fixed;
    width:100%;
    top:0;
    left:0;
}
    #header .sub-header{
        background-color:#000000;
        color:#FF6600;
        height:125px;
        margin:0 125px 0 125px;
    }

DEMO JSFiddle

Answer 7

设置边距而不是右边和左边的值怎么样？

 position:fixed;
 width:100%;
 height:125px;
 top:0;
 margin:0px 125px;
 text-align:right;
 background:black;
 color:white;
 font-size:100px;

这将使你的div居中。

如何从左右两侧平均定位元素？

7 个答案:

demo