                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

为啥我这个两个div块到一行了

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container{
height:300px;
background:#ccc;

display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
</head>

<body>
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

<div class="container">
    <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>

剑锋南指

2020-01-23

源自：初识HTML(5)+CSS(3)-升级版 15-10

关注问题我要回答

747

操作

收起

2 回答

慕圣6122783
2020-02-04

首先两个div类名一样，然后你需要在代码任务区再加一层<div>标签，自已起一个不同的类名,你可以参考一下

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>父元素高度确定的多行文本</title>

<style>

.container{

height:300px;

background:#ccc;

display:table-cell;/*IE8以上及Chrome、Firefox*/

vertical-align:middle;/*IE8以上及Chrome、Firefox*/

}

.photo{

height:300px;

background:#ccc;

display:table-cell;

vertical-align:middle;

}

</style>

</head>

<body>

<div class="container">

<div>

<p>看我是否可以居中。</p>

<p>看我是否可以居中。</p>

<p>看我是否可以居中。</p>

<p>看我是否可以居中。</p>

<p>看我是否可以居中。</p>

</div>

</div>

<div >

<div class="photo">

<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>

</div>

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

慕后端6548241
2020-01-28

因为display:table-cell将块状元素变成了单元格~

块状元素有个特点就是单独一行，而这个特点就没咯~

1 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1225840 人
解答问题 18235 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

4 回答div是块状元素，怎么两个元素还能同时占一行？

1 回答请问一下这两个div怎么居中写到一起

8 回答为什么有两个DIV

2 回答为什么两个div不会产生空行

3 回答在div块状元素中再添加两个div元素，这样做对吗

搜索更多本课相关问答

为啥我这个两个div块到一行了

我要回答关注问题

意见反馈帮助中心 APP下载