首页 > 试题广场 >

html5和css3实现下面效果，总宽度是页面的90%，1,

[问答题]

html5和css3实现下面效果，总宽度是页面的90%，1,2,3宽度相等，注意移动端不同分辨率宽度自适应。

不完美卡卡

.box{

width: 90%;

height: 100px;

margin: 0 auto;

}

.box ul{

width: 100%;

height: 100%;

display: flex;

align-items: center;

}

.box ul li{

box-sizing: border-box;

list-style: none;

flex: 1;

height: 50px;

border: 1px solid #ccc;

}

<ul>

</ul>

</div>

发表于 2018-04-09 17:20:51 回复(0)

Charlessss

用一个大div包住三个小div，大的设置宽为90%，将小div的box-sizing属性设置为border-box;再设置宽为33.33%

发表于 2017-10-28 02:08:32 回复(1)

蒋斌2

display：flex 弹性布局， flex=1 均分父级元素

发表于 2017-10-26 09:38:37 回复(0)

Orange。

我的想法是用CSS3的弹性布局来做，加入meta标签进行移动屏幕自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>宽度自适应</title>
    <style type="text/css">
        .flex-container{
            display: flex;
            margin: 0 auto;
            width: 90%;
            height: 50px;
            border: 0.5px solid #ccc;
        }
        .flex-item{
            width: 33.33%;
            text-align: center;
            border: 0.5px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="flex-container">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div> 
    </div>
</body>
</html>

编辑于 2017-08-02 22:13:10 回复(1)

VimMing

<!DOCTYPE html>
<html>
<head>
<style>
.container{
  width: 90vw;
  height: 50px;
  display: flex;
}
.child{
  display: flex;
  border: 1px solid #CCC;
  flex: 1;
  justify-content: center;
  align-item: flex-start;
}
</style>
</head>
<body>
<div class="container">
	<div class="child">
		<span>1</span>
	</div>
	<div class="child">
		<span>2</span>
	</div>
	<div class="child">
		<span>3</span>
	</div> 
</div>
</body>
<html>

发表于 2017-08-04 11:36:15 回复(2)

4O4NotFound

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <style>
            #main{
                display:grid;
                width: 90%;
                height: 50px;
                grid-template-columns: 1fr 1fr 1fr;
            }
            #main > *{
                text-align: center;
                border: 1px solid #ccc;
            }
        </style>
</head>
<body>
    <div id="main">
        <div id="box1">1</div>
        <div id="box2">2</div>
        <div id="box3">3</div>
    </div>
</body>
</html>

编辑于 2021-08-19 16:14:08 回复(0)

随便来个offer就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content{
            width:90vw;
            display:flex;
            margin: 0 auto;
        }
        .box{
            height:50px;
            border:1px solid #ccc;
            flex:1;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div id='content'>
        <div class='box'>1</div>
        <div class='box'>2</div>
        <div class='box'>3</div>
    </div>
</body>
</html>

发表于 2022-10-19 14:17:15 回复(0)

小麻利

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        .container{
            width: 90%;
            text-align: center;
            margin: auto;
            overflow: hidden;
        }
        .box{
            border: 1px solid #ccc;
            float: left;
            height: 50px;
        }
        @media screen and (max-width:767px){
            .box{
                width: 100%;
            }
            /* 去重复边框 */
            .box:nth-child(2){
                border-top: 0px;
            }
            .box:nth-child(3){
                border-top: 0px;
            }
        }
        @media screen and (min-width:768px){
            .box{
                width: 33.3%;
            }
            .box:nth-child(2){
                border-left: 0px;
            }
            .box:nth-child(3){
                border-left: 0px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

发表于 2022-06-25 16:03:58 回复(0)

前端命名侠

<style>

* {

margin: 0;

padding: 0;

}

.father {

width: 90%;

display: flex;

}

.box {

text-align: center;

border: 1px solid #ccc;

height: 50px;

flex-grow: 1;

}

</style>

</div>

发表于 2020-03-11 19:24:08 回复(0)

猿来

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

发表于 2018-07-22 13:24:35 回复(1)

昼虎

发表于 2018-02-04 14:11:00 回复(0)

路雨LY

<!DOCTYPE html>

<head>

.container{width:90%;height:50px;margin:0 auto;}

.box{width:30%;height:50px;border:1px solid #ccc;float:left;text-align:center;}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

发表于 2017-12-06 20:39:53 回复(0)

牛客二呆

想起了一点，总高度是50px的话，加强边框就有52px了，所以在定高的时候应该是48px

编辑于 2017-11-21 16:36:37 回复(0)

Z皓

看到CSS3就应该要知道利用flex，而不是设置宽度百分比

发表于 2017-08-27 09:25:26 回复(0)

totoroxiao

<!DOCTYPE html>

<html>

<head>

.parent {

height: 50px;

width: 90%;

display: flex;

}

.child {

height: 100%;

border: 1px solid #CCC;

flex: 1;

text-align: center;

}

</style>

</head>

<body>

</div>

</body>

</html>

编辑于 2017-08-18 10:50:37 回复(0)

疯狂的蟹

<html>
<head>
div{
weight : 90%;
margin : o auto;
}
.sec{
float : left;
weight : 33.3%;
height : 50px;
border : 1px solid #ccc;
}
</head>
<body>
<div>
<section id="sec1" class="sec"></section>
<section id="sec2" class="sec"></section>
<section id="sec3" class="sec"></section>
</div>
</body>
</html>

发表于 2017-08-12 11:19:27 回复(0)

南邮kd

  <style> 
  .outer{ 
  width:90%; 
  height:50px; 
  border:1px solid #ccc; 
  display:flex; 
  } 
  .outer>div{ 
  flex:1; 
  text-align:center; 
  line-height:50px; 
  } 
  .outer div:nth-child(2){ 
  border-left:1px solid #ccc; 
  } 
  .outer div:last-child{ 
  border-left:1px solid #ccc; 
  } 
  </style> 
    
  <divclass="outer"> 
  <div>1</div> 
  <div>2</div> 
  <div>3</div> 
  </div> 

发表于 2017-08-03 15:38:21 回复(0)

油炸热咖啡 wayne

<html>

<head>

</head>

<body>

</div>

</body>

</html>

.container{

width:90%;

height:50px;

border: solid 1px #ccc

}

.box{

width:33.067%;

height:50px;

border: solid 1px #ccc;

float:left;

text-align:center

}

发表于 2017-08-03 15:36:24 回复(0)

静水深流828

<!DOCTYPE html> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> <style> div{ float: left; height: 50px; border: 1px solid #CCC; width: 30%; text-align: center;

} </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> </body> </html>

发表于 2017-08-01 21:47:33 回复(0)

xingfei_happy

不知道是否是这么个意思，主要思想是：三个div宽度设成百分比，估摸取个33.33%，左右两个分别设置做浮动和右浮动，中间div通过设置margin值来完成布局。凑合能实现效果吧，但是，自适应要怎么做
*{margin:0;padding:0}

.parent{width:90%;margin:0 auto}
    .parent div{height:50px;box-sizing: border-box}
    .left{border:1px solid #ccc;width:33.33%;float:left}
    .center{border:1px solid #ccc;margin:0 33.335%;width:33.33%;border-left:none;border-right:none}
    .right{border:1px solid #ccc;width:33.33%;float:right}

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

编辑于 2017-08-01 18:53:08 回复(0)

提交观点

问题信息

来自：4399公司2017秋...

上传者：牛妹

难度：

20条回答 158收藏 6337浏览

html5和css3实现下面效果，总宽度是页面的90%，1,

问题信息

热门推荐

相关试题