正文

div固定宽度和动态拉伸混合水平排列

追极  追极  2022-10-09  672

关键词：

1.效果图

2.源代码

html

<h2>1.头部固定，尾部拉伸</h2>
<div class="container" id="div1">
    <div class="head"></div>
    <div class="tail"></div>
</div>

<h2>2.尾部固定，头部拉伸</h2>
<div class="container" id="div2">
    <div class="tail"></div>
    <div class="head"></div>
</div>

<h2>3.头尾固定，中间拉伸</h2>
<div class="container" id="div3">
    <div class="head"></div>
    <div class="tail"></div>
    <div class="center"></div>
</div>

<h2>4.中间固定，两头拉伸</h2>
<div class="container" id="div4">
    <div class="head">
        <div class="inner"></div>
    </div>
    <div class="tail">
        <div class="inner"></div>
    </div>
    <div class="center"></div>
</div>

css

<!-- 样式 -->
<style type="text/css">
    /* 容器宽度为100% */
    .container{
        width: 100%;
    }

    /** 头部div固定宽度 **/
    #div1 .head{
        width: 200px;
        height: 100px;
        background-color: #00F7DE;
        float: left;
    }

    /** 尾部div自动填充拉伸 **/
    #div1 .tail{
        width: auto; /** 宽度不写或者auto都行 **/
        height: 100px;
        margin-left: 200px;
        background-color: #FFB800;
    }

    /** 尾部div固定宽度 **/
    #div2 .tail{
        width: 200px;
        height: 100px;
        background-color: #FFB800;
        float: right;
    }

    /** 头部div自动填充拉伸 **/
    #div2 .head{
        width: auto;
        height: 100px;
        margin-right: 200px;
        background-color: #00F7DE;
    }


    #div3 .head{
        width: 200px;
        height: 100px;
        background-color: #00F7DE;
        float:left
    }

    #div3 .center{
        width:auto;
        height: 100px;
        background-color: #009f95;
        margin-left: 200px;
        margin-right: 200px;
    }

    #div3 .tail{
        width:200px;
        height: 100px;
        background-color:#FFB800;
        float: right;
    }

    #div4{
        position: relative;
    }

    #div4 .head{
        width: 50%;
        height: 100px;
        float: left;
    }

    #div4 .head .inner{
        height: 100px;
        background-color: #00F7DE;
        margin-right: 100px;
    }

    #div4 .tail{
        width: 50%;
        height: 100px;
        float: left;
    }

    #div4 .tail .inner{
        height: 100px;
        background-color:#FFB800;
        margin-left: 100px;
    }

    #div4 .center{
        position: absolute;
        width: 200px;
        height: 100px;
        left: 50%;
        margin-left: -100px;
        background-color: #009f95;
    }
</style>

wpf水平对齐左和拉伸？

...拉伸。但是到了50之后，它变成了中心，高度和宽度大小固定为50例如如果达到50，它看起来像这样|□|但我想要的是这个|ㅁ|我的xaml代码在这里<BorderHor 查看详情

如何在固定宽度的 div 中居中动态宽度按钮？

】如何在固定宽度的div中居中动态宽度按钮？【英文标题】：Howtocenteradynamicwidthbuttoninsideafixedwidthdiv?【发布时间】：2012-05-1300:58:59【问题描述】：根据包裹在固定div中的值，我有不同宽度的提交按钮或普通按钮。现在，由于缺少... 查看详情

如何水平居中固定宽度的按钮？

】如何水平居中固定宽度的按钮？【英文标题】：Howtocenterafixed-widthbuttonhorizontally?【发布时间】：2013-11-1420:50:56【问题描述】：我有一个宽度始终为50像素的按钮。我怎样才能让它在父div中水平居中？【问题讨论】：你的父div有... 查看详情

具有动态宽度和高度的垂直和水平中心块

...：我需要将元素垂直和水平居中，并且该元素不能有任何固定尺寸。元素的内容不得受到影响...这意味着一些元素将文本左对齐，其他元素居中，它们可能是图像等。这是我目前所在的位置：http://jsfiddle. 查看详情

如何使具有特定宽度和固定位置的 div 居中？

】如何使具有特定宽度和固定位置的div居中？【英文标题】：Howtocenteradivwithaspecificwidthandfixedpositioning?【发布时间】：2014-03-1502:04:45【问题描述】：我正在编码，并试图将我的div水平居中于页面中间。它只是一个普通的div，现在... 查看详情

如何使 flexbox 响应式？

...】：我有一个包含两个要水平堆叠的元素的div。div#C具有固定宽度，而div#B将填满剩余的空间。但是div#B的内容可能是固定宽度（动态）或100%宽度（div#B）。我想要的效果是，如果屏幕宽度足够小，以至于在div#B和div#C开始重叠之... 查看详情

宽度不固定，水平居中

<divid="box"> <divid="inner">11111111111111111111</div></div> 1.相对定位： #box{position:relative;left:50%;float:left;} #inner{position:relativ 查看详情

GTK Treeview 固定宽度

】GTKTreeview固定宽度【英文标题】：GTKTreeviewfixedwidth【发布时间】：2016-09-2222:15:22【问题描述】：我的窗口结构如下：窗口>VBox>滚动窗口>树视图>列当我标记最后一列时出现了我的问题（它必须是动态分配）。如果标签... 查看详情

旧版弹性盒

...　　1）horizontal水平排列，子代总width=父级width；若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度　　　　2）vertical垂直排列，子代总height=父级height；若父级固定高度，则子代设置的height无效，子代会撑满父级高... 查看详情

不固定文字在固定高度宽度下垂直水平居中

1<div>2<span>BZJ-1300/1450/1600Automatic3FluteLaminator</span>4</div>div{width:150px;height:70px;display:table;}span{display:table-cell;vertical-align:middle;height:70px;width: 查看详情

尝试通过使用 UICollectionViewCompositionalLayout 实现固定高度、动态宽度（包装内容）水平 UICollectionView 的单元格

】尝试通过使用UICollectionViewCompositionalLayout实现固定高度、动态宽度（包装内容）水平UICollectionView的单元格【英文标题】：Attempttoachievefixedheight,dynamicwidth(wrapcontent)horizontalUICollectionView\'scellbyusingUICollectionViewCompositionalLayout【发布... 查看详情

固定宽度 div，根据长度动态调整文本大小

】固定宽度div，根据长度动态调整文本大小【英文标题】：fixedwidthdiv,resizingtextontheflybasedonlength【发布时间】：2011-01-2615:48:38【问题描述】：假设您有一个简单的固定宽度布局，可以从MySQL数据库中提取title。CSS：#wrapperwidth:800px;h... 查看详情

以动态宽度居中固定 div (CSS)

】以动态宽度居中固定div(CSS)【英文标题】：Centerfixeddivwithdynamicwidth(CSS)【发布时间】：2013-06-0819:08:46【问题描述】：我有一个包含这个CSS的div：#some_kind_of_popupposition:fixed;top:100px;min-height:300px;width:90%;max-width:900px;现在，我怎样才... 查看详情

以动态宽度居中固定 div (CSS)

<a> 的固定宽度

】<a>的固定宽度【英文标题】：Fixedwidthfor<a>【发布时间】：2012-02-2113:37:44【问题描述】：我的<div>中有3个<a>选择器。我给了他们固定的宽度。但它们并没有拉伸到正确的宽度。它们只是拉伸以适应... 查看详情

反应原生布局固定宽度并拉伸剩余空间

】反应原生布局固定宽度并拉伸剩余空间【英文标题】：Reactnativelayoutfixedwidthandstretchremainingspace【发布时间】：2017-05-0511:34:54【问题描述】：如何在react-native中制作这样的东西？在右边我想要一个具有固定宽度的组件，在左边占... 查看详情

如何将水平堆栈视图中的所有按钮拉伸为设备宽度

】如何将水平堆栈视图中的所有按钮拉伸为设备宽度【英文标题】：Howtostretchallbuttonsinsidehorizontalstackviewasdevicewidth【发布时间】：2017-06-2911:07:49【问题描述】：我很难将水平堆栈视图中的所有5个按钮拉伸到与我的设备宽度一样... 查看详情

将元素的宽度/高度固定为它是啥

】将元素的宽度/高度固定为它是啥【英文标题】：Fixingwidth/heightofanelementtowhateveritis将元素的宽度/高度固定为它是什么【发布时间】：2015-05-1708:28:49【问题描述】：我有一个应该是水平主菜单的div元素。我使用了ul和它的lis作为... 查看详情