[分享]css中如何把两个div水平

在CSS中，要想将两个div元素放在同一行并排布，可以采用以下方法： 1. 使用浮动属性 可以给这两个div元素添加float:left;属性，将它们都向左浮动，从而实现水平排列的效果。 2. 使用d...

在CSS中，要想将两个div元素放在同一行并排布，可以采用以下方法： 1. 使用浮动属性 可以给这两个div元素添加float:left;属性，将它们都向左浮动，从而实现水平排列的效果。 2. 使用display:inline-block属性 可以给这两个div元素添加display:inline-block;属性，将它们都转为内联块元素，从而实现水平排列的效果。 无论是哪种方法，都需要给这两个div元素设置相应的宽度，确保它们不会超过父容器的宽度。 HTML代码可以这样写：

<div class="container">
  <div class="box1">
    <p>这是第一个div的内容</p>
    <pre>这里放代码

这里放代码

.container {
  width: 100%;
  overflow: hidden;
}

.box1 , .box2{
  width: 50%;
  float: left; /* 或者 display: inline-block; */
}

p {
  /* 段落样式 */
}

pre {
  /* 代码样式 */
}