css如何让div横向排列

html-css015

css如何让div横向排列,第1张

可以使用弹性布局，display: flex 就可以让div横排，默认布局轴方向就是横向，justify-content: space-between可以是div平均分布在水平轴上。

我刚复制了一下，这代码在ie6和搜狗2.0运行的结果是一致的没有出现什么问题，

文字熟知的方法有以下几种：（复制来的）

第一种方式输出：（代码）

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

.wrap{float:leftwidth:14pxbackground:#ccc}

.wrap2{float:leftwidth:14pxbackground:#eee}

</style>

</head>

<body>

<div class="wrap">

我们回不去了吗

</div>

<div class="wrap2">

我们还是朋友

</div>

</body>

</html>

效果图：

第二种方式输出：（代码）

<!DOCTYPE html >

<html >

<body>

<div style="writing-mode:tb-rltext-align:leftborder:1px solid red">

writing-mode设置或检索对象的内容块固有的书写方向。

此属性将影响text-align属性与vertical-align属性的作用。

对应的脚本特性为writingMode。

</div>

<br />

<div style="layout-flow:vertical-ideographictext-align:rightborder:1px solid green">

layout-flow设置或检索对象内文本的流动和方向。

此属性将影响text-align属性与vertical-align属性的作用。

对应的脚本特性为layoutFlow。

</div>

</body>

</html>

第三种方式输出：（代码）

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

</style>

</head>

<body>

<div>

我

们

回

不

去

了</div>

<pre>

我

们

回

不

去

了

吗</pre>

</div>

</body>

</html>