[分享]css两列左窄右宽型

<div class="left-column">
    <p>This is the content of left column.</p>
</div>

<div class="right-column">
    <p>This is the content of right column.</p>
</div> 

接下来，我们需要使用CSS来定义这两列布局的样式。我们可以为左列设置一个固定的宽度值，并通过float属性来使其左浮动。而对于右列，我们可以为其设置一个百分比的宽度值，并通过margin-left属性来调整其与左列之间的距离。

.left-column {
    width: 200px;
    float: left;
    background-color: lightgray;
}

.right-column {
    width: 80%;
    margin-left: 220px;
    background-color: gray;
} 

通过以上CSS定义，我们就完成了一个简单的两列左窄右宽型的布局效果。同时，我们也可以在这两列中添加各种类型的内容，包括文字、图片、视频等等，以满足不同的页面设计需求。