0

我正在开发我的第一个 drupal 站点，虽然我有很好的 web 编程技能（css、jscript、php），但我试图尽可能完全地使用他们的模板来遵循 drupal 标记。

我的问题是我没有太多经验的 3 列响应式网站。我的左列和右列（13% + 1% 边距）是 div，它们在视觉上表示沿着父容器的长度向下延伸的彩色条纹，而中心 div（72%）是内容所在的位置。问题是我决定让父容器通过将子元素设置为绝对值并使用边距将子元素拉伸到父元素的尺寸来控制子 div 的大小。(top:x;left:x;bottom:x;right:x;) - 拉伸垂直我使用parent_container:after和display:block;padding-top:xx%;

这些列由菜单包装器垂直分割，而顶部容器可以设置高度（padding-top:xx%），底部容器需要根据内容的要求进行扩展。

问题：如果孩子从父母那里得到他们的大小，我怎样才能让孩子根据孩子的内容调整父母的大小？谢谢！

#main-wrapper {
    position:relative;
    width:100%;
}

#main-wrapper:after {
    content:"";
    display:block;
    padding-top:46%;
}

#main-wrapper-left{
    position:absolute;
    top:0;left:1%;bottom:0;right:86%;
    background:#CC0000; 
}

#main-wrapper-left img {
    width:100%;
    display: block;
}

#main-wrapper-left a{
    display:block;
}

#main-wrapper-right{
    position:absolute;
    top:0;left:86%;bottom:0;right:1%;
    background:#0600ff;
}

#main-wrapper-center{   
    position:absolute;
    top:0;left:14%;bottom:0;right:14%;
    background: #ffffff;
}

<div id="main-wrapper">
    <div id="main-wrapper-left"> images and links go here </div>
    <div id="main-wrapper-center"> header slideshow goes here </div>
    <div id="main-wrapper-right"> images and links go here </div>
</div>

<div> menu </div> // this is where the menu div goes which splits the page page in two

<div id="main-wrapper">
    <div id="main-wrapper-left"> advertisements </div>
    <div id="main-wrapper-center"> main content goes here </div>
    <div id="main-wrapper-right"> advertisements </div>
</div>
4

0 回答 0