css布局两列不定宽布局

CSS布局是Web开发领域中的基础知识，掌握良好的CSS布局技巧可以让网页的呈现更加美观和灵活。其中，两列不定宽布局是常用的一种布局方式。

这种布局方式特点是左右两侧的宽度不一定相等，并且宽度值不确定。布局的关键是使用float属性以及margin和padding的设置，下面的代码展示了一个简单的两列不定宽布局：

<style>
    .left {
        float: left;
        width: 30%;
        margin-right: 5%;
    }
    .right {
        float: left;
        width: 65%;
    }
</style>

<div class="left">
    <p>这是左侧内容</p>
</div>

<div class="right">
    <p>这是右侧内容</p>
</div>

这段代码中，两个div元素都使用float属性向左浮动，其中左侧的宽度设置为30%，右侧的宽度设置为65%（左右两侧的宽度加起来等于100%）。由于两侧的宽度不确定，所以在设置左侧元素的宽度后，需要使用margin-right属性设置一定的右侧外边距，以便给两侧元素之间留出一定的水平间距。

除了上述方法，还有其他的布局方式可以实现两列不定宽布局，但核心思路仍然是使用float属性和margin和padding的设置。在实际的项目开发中，应根据网页的具体需求和样式要求选择合适的布局方式。