1

我使用 Flare 创建了一个文档页面，并强制面包屑保持固定在顶部导航下方。页面按原样工作，但我希望 div 横跨页面。请参阅下面的当前设计：

点击查看示例截图

如果我删除子 div 中的 div，我可以将 div 拉伸到 100% min-width，但它只向右拉伸，同时将面包屑保持在我想要的位置。下面的例子：

点击查看示例截图

或者我可以通过添加父 div 使其拉伸 100% left:0;，但随后面包屑移动不合适。我可以使用 margin-right 或 right 将 div 定位到所需的区域，但是在调整浏览器大小时 div 不会与其余内容同步。

4

3 回答 3

0

谢谢您的回复。这是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;
}

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

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

于 2017-08-27T17:36:43.897 回答
0

尝试这个：

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

这里的重要部分是position,width和on 。lefttransform.full-width

于 2017-08-25T19:49:12.123 回答
0

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

于 2017-08-25T19:52:32.777 回答