如何让DIV横排，然后可以控制各DIV的宽度

稻庄 2015-07-24 10:46:36

请教各位，如题，我设置div的display:inline属性后可以实现横排，可是各div的宽度没起作用，我该如何实现横排的4个div按不同宽度排列？
下面是我的代码：



<div   style="width:100%;border-style:solid;border-width:1pt;border-color:black;">

<div style="width:55%;text-align:center;border-style:solid;border-width:1pt;border-color:black;display:inline;">商品信息</div>

<div  style="width:15%;text-align:center;border-style:solid;border-width:1pt;border-color:black;display:inline;">单价</div>

<div  style="width:15%;text-align:center;border-style:solid;border-width:1pt;border-color:black;display:inline;">数量</div>

<div  style="width:15%;text-align:center;border-style:solid;border-width:1pt;border-color:black;display:inline;">金额</div>

</div>

...全文

316 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

sydhr_1994 2015-07-29

打赏
举报

引用 5 楼 Raffin 的回复:

[quote=引用 1 楼 sydhr_1994 的回复:] 你给他们display:inline-block; 或者他们不用display 给他们float

是不是display:inline不能设置宽度？必须用inline-block或者float:left？[/quote] 是的，inline的元素只能由内容撑开

鸣鸣Amadues 2015-07-29

打赏
举报

引用 1 楼 sydhr_1994 的回复:

你给他们display:inline-block; 或者他们不用display 给他们float

是不是display:inline不能设置宽度？必须用inline-block或者float:left？

zpjshiwo77 2015-07-24

打赏
举报

方法一：把display:inline；去掉，改成float:left；方法二：把display:inline；去掉，分别加上{position:absolute;top:0px;}，{position:absolute;top:0px;left:55%}，{position:absolute;top:0px;left:70%}，{position:absolute;top:0px;left:85%}

forwardNow 2015-07-24

打赏
举报



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    



<!--  



一般的布局方式有三种：

    1，行布局（标准的默认的布局方式）；

    2，列布局（利用float属性）；

    3，定位布局（利用position属性）



-->



<h1>1，行布局（标准的默认的布局方式）；</h1>

<div class="line-layout-container">

    <div class="line-layout">1</div>

    <div class="line-layout">2</div>

    <div class="line-layout">3</div>

</div>

<style>

    h1 { font-size: 100%; }

    .line-layout-container { width: 400px; padding: 10px; background-color: gray;}

    .line-layout { width: 90%; height: 50px; margin: 10px;background-color: green;}

</style>



<h1>2，列布局（利用float属性）；</h1>

<div class="column-layout-container">

    <div class="column-layout">1</div>

    <div class="column-layout">2</div>

    <div class="column-layout">3</div>

</div>

<style>

    .column-layout-container { width: 400px; padding: 10px; background-color: gray;}

    .column-layout { width: 25%; height: 90px; margin: 10px;background-color: green;}

    .column-layout-container { overflow: hidden; }

    .column-layout { float: left; }

</style>



<h1>3，定位布局（利用position属性）；</h1>

<div class="absolute-layout-container">

    <div class="absolute-layout first">1</div>

    <div class="absolute-layout second">2</div>

    <div class="absolute-layout third">3</div>

</div>

<style>

    .absolute-layout-container { width: 400px; height:150px; background-color: gray;}

    .absolute-layout { width: 50px; height: 50px; background-color: green;}

    .absolute-layout-container { position: relative;} /* 指定参考点 */

    .absolute-layout { position: absolute; }

    .first{ left: 20px; top: 20px;}

    .second { left: 140px; bottom: 40px;}

    .third { right: 20px; bottom: 20px;}

</style>





</body>

</html>