css里 在一个标签中如何使文字和左边图片对齐成顶部对齐，怎么布局啊？

html-css014

css里 在一个标签中如何使文字和左边图片对齐成顶部对齐，怎么布局啊？,第1张

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：img{float:left}。

3、浏览器运行index.html页面，此时div标签中的左侧图片与右侧图片通过css调整为了浮动而顶部对齐了。

写一个小例子给你看看，你就明白了

html内容如下

<div class="left">左边的内容</div>

<div class="right">

    <div class="right_content">右边的内容</div>

</div>

css内容如下：

.left{width:200pxfloat:leftmargin-right:-200pxbackground: #00ca57}

.right{width:100%float:left}

.right_content{margin-left:200pxbackground: #269abc}

完美实现，请采纳~！

可以通过竖向排列的方式，将子div设置为行内块即可。话不多说了，直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

div {border: solid 1px #000}

#main-div {

width: 200px

height: 300px

writing-mode: vertical-lr}

.item {

width: 100px

height: 50px

display: inline-block

background-color: antiquewhite

writing-mode: horizontal-tb}

</style>

</head>

<body>

<div id="main-div">

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

</div>

</body>

</html>

效果如下：

这都已经9年了，也就我想到了这个问题的答案，我简直就是个天才，哈哈哈