美文网首页
CSS占满剩余宽度

CSS占满剩余宽度

作者: 且须文雅 | 来源:发表于2018-10-09 15:24 被阅读0次

方法一

<style>
label{
    float:left
}
.right{
    overflow:hidden
}
</style>
<div>
    <label></label>
    <div class="right">
        <input />
    </div>
</div>

在左边label元素设置了左浮动的前提下,右部包裹input的div设置了overflow:hidden属性,自适应填充剩余宽度。

<style>
label{
    float:left
}
.right{
    overflow:hidden
}
span{ 
    float:left; 
    line-height: 30px; 
    margin-left: 5px; 
} 
</style>
<div>
    <label>注册资金:</label>
    <span>万元</span>
    <div class="right">
        <input type="text" required />
    </div>
</div>

方法二 左边宽度固定型

<style>
.left{
    width:200px;
    height:50px;
    background:red;
    float:left;//设置左浮动
}
.right{
    height:50px;
    background:blue;
    margin-left:200px;//设置左外边距
}
</style>
<div class="left">左边宽度固定</div>
<div class="right">右边宽度自动</div>

相关文章

  • CSS占满剩余宽度

    方法一 在左边label元素设置了左浮动的前提下,右部包裹input的div设置了overflow:hidden属...

  • CSS 布局实现左边固定宽度,右边占满剩余宽度

    float 浮动 浮动是最普遍实现的方式,但 css 浮动的初衷并不是用于布局的,所以浮动布局迟早会被淘汰,应该作...

  • 2020-06-12 面试

    笔试题 1.请用 CSS 浮动,绝对定位,flex 布局实现两列布局,要求左列宽度 200px ,右列占满剩余空间...

  • 实现DIV占满剩余容器

    一、需求:实现下图的布局 代码例子: 在html中显示是这样的 很显然这样是不符合需求的,因为内容容器高度不对,溢...

  • table布局固定第一列,其他列等分剩余宽度

    只需要把第一列设置固定宽度width,剩余列设置min-width,这样不论剩余列中有没有内容,都会等分剩余宽度,...

  • table-layout:fixed;

    属性均分表格列宽度,也可设定宽度,设定后剩下的依旧均分剩余宽度

  • Android Dialog 宽度占满全屏

    Dialog 宽度占据全屏 关于如何自定义设置 Dialog 的大小,以及如何让宽度占满整个屏幕,其实是一个老生常...

  • CSS之宽度与高度

    使用CSS进行布局与定位,就必须了解CSS中的宽度与高度。在CSS中:1.内联元素的宽度由行高决定,宽度由内容、p...

  • CSS常用知识点

    1,居中布局 语法:margin:0 auto;将div框宽度设置为100%就能占满屏幕,如果不想占满屏幕,只希望...

  • CSS布局&CSS居中&媒体查询

    关于CSS布局&CSS居中&媒体查询三者的见解 css布局: 单栏布局: 分为最大宽度和固定宽度,80%以上的页面...

网友评论

      本文标题:CSS占满剩余宽度

      本文链接:https://www.haomeiwen.com/subject/ssteaftx.html