3栏页面，左栏位于中间内容下

Question

我创建了一个页面，其中有三列显示侧面和中间的图像。一旦我上传它，当我在我自己的系统上显示它之后我上传显示完美。

这是左侧边栏的css

.sidebars_left {
    width:20%;
    height:auto;
    float:left;
    text-align:center;
    margin-left:2%;
}

.sidebar{
    margin-top:2%;
    background:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    border-radius:5px;
}

左侧边栏的

代码

 <div class="sidebars_left">
    <aside class="sidebar">
        <article>
            <a href="soul.php">
                <img src="images/chocolate/soul.png" alt="For the soul" width="80%">
            </a>
        </article>
     </aside>

<aside class="sidebar">
    <article>
        <a href="world.php">
            <img src="images/chocolate/world.jpg" alt="For the soul" width="80%">
            </a>
        </article>
    </aside>
</div>

Answer 1

   <style>
   div{float:left;}
   mid-div{margin-left:###;}
   </style>

在每个div中使用float：left 然后给中间列留下边距。 你还必须定义这些列的宽度和高度。

Answer 2

<div class="content-left">Content 1</div>
<div class="content-middle">
    <div class="content">Content 2</div>
</div>
<div class="content-right">Content 3</div>

[class^="content-"]{
    display:table-cell;
}

.content-left{
    height: 300px;
    min-width: 300px;
    background-color: lightgray;
}

.content-middle{
    width: 100%;
}

.content-right{
    height: 300px;
    min-width: 300px;
    background-color: lightgray;
}

.content{
    background-color: lightgray;
    height: 300px;
    width: 300px;
    margin: 0 auto;
}