首页写一个html水平面的div代码

写一个html水平面的div代码

时间: 2023-06-27 08:02:47 浏览: 63

以下是一个简单的水平面的 `div` 代码示例： ```html <!DOCTYPE html> <html> <head> <title>Horizontal Div</title> <style> .container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 100px; background-color: #F5F5F5; padding: 10px; } .box { width: 100px; height: 50px; background-color: #FFA07A; border-radius: 5px; text-align: center; line-height: 50px; font-size: 20px; color: #FFFFFF; } </style> </head> <body> <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div> </body> </html> ``` 这个 `div` 包含了一个 `container` 类，这个类使用了 `flex` 布局，让三个 `box` 类的子元素在水平方向上排列，同时在垂直方向上居中对齐。每个 `box` 类都有一些自定义的样式，包括背景颜色、边框半径、字体大小等。