Div仅向一个方向延伸

我使用Flare创建了一个文档页面并强制将面包屑固定在顶部导航栏下方。该页面按原样运行，但我希望div在整个页面上展开。请参阅当前的设计如下：Div仅向一个方向延伸

Click to see example screenshot

我可以舒展格为100％，如果我的孩子DIV删除min-width，但它延伸只到右边，同时保持我想要面包屑。下面的示例：

Click to see example screenshot

或者，我可以把它拉长100％通过父DIV添加left:0;，但随后的面包屑搬出的地方。我可以使用margin-right或right将div放置到合适的区域，但div在调整浏览器大小时不会与其余内容同步。

来源

2017-08-25 RCB

请发表您的代码，查看[如何提问]（https://stackoverflow.com/help/how-to-ask）以改善您的问题 –

极难提供无代码的解决方案，但有可能是你的breadcrumbs div的父元素周围的填充/边距，这会导致它移到左侧的右侧。如果您可以发布您的代码，我相信有人可以提供更好的答案。 – sk03

我已经按照建议发布了代码。谢谢！ – RCB

试试这个：

*{ 
 
    padding:10px; 
 
} 
 
.parent { 
 
    margin:auto; 
 
    width:300px; 
 
    background-color:red; 
 
} 
 
.breadcrums { 
 
    background-color:blue; 
 
} 
 
.full-width { 
 
    background-color: green; 
 
    position:relative; 
 
    width:100vw; 
 
    left:50%; 
 
    transform:translateX(-50%); 
 
}

<div class="parent"> 
 
    <div class="breadcrums">breadcrums</div> 
 
    <div class="full-width">full-width element</div> 
 
</div>

的重要组成部分，这里是上.full-widthposition，width，left和transform。

来源

2017-08-25 19:49:12 JRoss

如果调整窗口大小，面包屑仍会移动。 – RCB

如果该div具有“绝对”位置，则应用css“left”属性。

来源

2017-08-25 19:52:32

谢谢你的回复。下面是HTML和CSS：

HTML：

<div class="crumbs_wrapper"> 
<div class="MCBreadcrumbsBox" > 
    <span class="MCBreadcrumbsPrefix">You are here:</span> 
    <a href="" class="MCBreadcrumbsLink">B1</a> 
    <span class="MCBreadcrumbsDivider"> B2 </span> 
    <a href=""class="MCBreadcrumbsLink">B3</a>... 
</div> 
</div>

CSS：

div.crumbs_wrapper 
{ 
position: fixed; 
    float: none; 
    width: 100%; 
    z-index: 1; 
} 

div.MCBreadcrumbsBox{ 
padding-bottom: 5px !important; 
    padding-top: 18px !important; 
    padding-left: 10px !important; 
    float: left; 
    position: relative; 
    margin-top: -12px; 
    background-color: #FFF; 
    z-index: 999; 
    width: 100%; 
    max-width: 104.5em; 
    box-shadow: 1.5px 1.5px 15px #888888; 
}

钍工具，我用的是耀斑，它没有固定的面包屑功能。自动生成面包屑;我只更改了CSS值，并在.crumbs_wrapper类中添加了一个额外的div。其他类由软件自动生成。

如果我删除max-width div只向右延伸，如果我将left: 0;添加到父div，面包屑会向左移动。我可以将面包屑带到我想要使用margin的位置，但在浏览器调整大小时不会保持不变。此外，填充和边距顶部用于将面包屑保留在顶部导航栏下方并与其余内容对齐。

来源

2017-08-27 17:36:43 RCB

Div仅向一个方向延伸

回答

相关问题