图像在屏幕不会中央宽度上自适应网站

图像居中比1355px更大时屏幕是当屏幕尺寸大于1355px 图像在屏幕不会中央宽度上自适应网站

.nav { 
    font-family: "proxima-nova", sans-serif; 
    display: block; 
    float: right; 
    color:#FFB8B8; 
    padding-right: 20px; 
    padding-top: 40px; 
    padding-bottom: 40px; 
    text-decoration: none; 
} 

.one img { 
    height: relative; 
    display: block; 
    margin: auto; 
    padding-top: 50px; 
    padding-bottom: 50px; 
}

不居中小于1355px

图片

来源

2017-04-05 Kiannabanana

删除您的CSS中的float:right;。如果屏幕尺寸超过1355像素，导航栏有足够的空间可以放在右侧，旁边的图像也可以放置。这发生在使用浮动时。如果您想要将导航栏保留在页面的右侧，您可以添加一个适合页面的margin-left，以便将导航栏保持在最右边。如果您仍然不喜欢这种方法，那么您还可以使用position: CSS属性将导航栏精确定位到您想要的位置。

来源

2017-04-05 01:14:39 Ahm23

谢谢。删除'float：right'确实解决了图像问题。但是，现在将“margin-left”应用于导航栏使其不会随窗口缩小。 – Kiannabanana

如果你真行与指定固定的高度为导航，做如下面的代码应该为你工作：

.parent { 
 
    height:98px; 
 
    display:block; 
 
} 
 

 
.nav { 
 
    font-family: "proxima-nova", sans-serif; 
 
    display: block; 
 
    float: right; 
 
    color:#FFB8B8; 
 
    padding-right: 20px; 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    text-decoration: none; 
 
    background: black; 
 
} 
 

 
.img{ 
 
    background:yellow; 
 
    position: relative; 
 
    display: block; 
 
    margin: auto; 
 
    padding-top: 50px; 
 
    padding-bottom: 50px; 
 
}

<div class="parent"> 
 
    <div class="nav"> 
 
    nav 
 
    </div> 
 
</div> 
 
<div class="img"> 
 
    image 
 
</div>

总之，我加了一个家长带固定高度并显示为块。父母将包含导航。我也把img定位为相对而不是高度。

快乐编码，

来源

2017-04-05 01:29:02 bakerhumadi

图像在屏幕不会中央宽度上自适应网站

回答

相关问题