如何让div右侧内容占据剩余空间

主要内容

分别基于float和Flexbox两种解决方案，让div块的右侧内容占据剩余全部空间

基于 float 的解决方案

你需要给包裹这两个div的父元素设置宽度，并且确保左侧div有一个固定的宽度。然后，右侧div可以使用margin-left来确保它位于左侧div的右侧，并使用overflow: hidden;（或者clear: both;）来确保它不会浮动到左侧div的下方。

但是，请注意，float不是实现这种布局的最佳方式，因为它可能会导致布局问题，尤其是在更复杂的布局中。不过，如果你坚持使用float，这里是一个例子：

<div style="width: 100%; /* 或者 body 的宽度 */">  
    <div style="float: left; width: 200px; /* 左侧 div 的固定宽度 */">  
        <img src="/how2j/CSS学习/png/4.png" class="img4">         
        <div class="left2">  
            <div class="s1">6551</div>  
        </div>  
    </div>  
    <div id="right" style="margin-left: 200px; /* 与左侧 div 的宽度相同 */ overflow: hidden;">  
        <div style="font-size: 13px;">  
            <span>热门回答，来自 机械</span> <span style="color: rgb(73, 73, 215);">关注话题</span>  
            <img src="/how2j/CSS学习/png/3.png" style="float: right;">  
        </div>  
        <br>  
        <span>人类历史上令人叹为观止的精度挑战有哪些</span>  
    </div>  
    <div style="clear: both;"></div> <!-- 清除浮动 -->  
</div>

基于 Flexbox 的解决方案

Flexbox 是一个更好的选择，因为它更易于理解和使用，特别是在实现这类布局时。以下是一个使用Flexbox的例子：

<div style="display: flex;">  
    <div style="flex: 0 0 200px;"> <!-- 左侧 div 的固定宽度 -->  
        <img src="/how2j/CSS学习/png/4.png" class="img4">         
        <div class="left2">  
            <div class="s1">6551</div>  
        </div>  
    </div>  
    <div id="right" style="flex: 1;"> <!-- 占据剩余空间 -->  
        <div style="font-size: 13px;">  
            <span>热门回答，来自 机械</span> <span style="color: rgb(73, 73, 215);">关注话题</span>  
            <img src="/how2j/CSS学习/png/3.png" style="float: right;">  
        </div>  
        <br>  
        <span>人类历史上令人叹为观止的精度挑战有哪些</span>  
    </div>  
</div>

 

在这个Flexbox解决方案中，左侧div的flex属性设置为0 0 200px，表示它不会伸缩，并且基础宽度是200像素。右侧div的flex属性设置为1，表示它会占据剩余的可用空间。这是一个更现代、更灵活且易于维护的布局方法。

（如有不对，欢迎指出）