Question

我正在尝试制作两个分区，一个部分包含图像，另一个部分包含文本。我提供的图像就像我想要的那样，但很抱歉我不能在这里提供图像因为不到10个声誉我需要至少10个声望才能在这里发布图像所以请转到提供的图像链接评论框。我也提供了我的代码，我尝试过。所以，任何人都可以提供任何帮助。我正在尝试按照我在评论框中提供的布局进行布局，请从评论框中查看，我是层叠样式表中的新手，所以请帮帮我。提前谢谢。

到目前为止我的HTML：

<div class = "layer5 main">
    <h1>Features</h1>
    <DIV style="width: 50%; border-right: solid 2px lightgreen">
    </DIV>
</div>

Here正是我想要做的。

Here是我目前所拥有的。

Answer 1

添加一些容器，然后在其中添加2个元素（块或表格单元格）。风格吧。就是这样。

有一个简单的垂直对齐解决方案。

.layer5 {
  text-align: center;
  margin-top: 20px;
}

.container {
  position: relative;
  display: table;
  width: 400px;
  border: 0px solid #000;
}

.image,
.text {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border: 0px solid tomato;
  padding: 10px;
}

.image {
  width: 200px;
}

.text {
  border-left: 2px solid red;
  width: 198px;
  
}

img {
  width: 100%;
  height: 100%;
}

<div class="layer5 main">
  <h1>Features</h1>
  <div class="container">
    <div class="image"><img src="https://www.enterprise.com/content/dam/global-vehicle-images/cars/FORD_FOCU_2012-1.png" alt=""></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati voluptas accusamus quidem officia. Provident consectetur ab nulla placeat fuga iusto, cumque voluptatem magnam veniam minus incidunt unde quae error labore?</div>
  </div>
</div>

Answer 2

试试这个：

.layer5
{
  text-align: center;
  margin-top: 20px;
}
.firstSection{float:left;width:45%;}
.secondSection{float:left;width:45%;}
.seprator{width: 5%; border-right: solid 2px lightgreen;height:25px;float:left;}

<div class = "layer5 main">
    <div class='firstSection'>Features1</div>
    <div class='seprator'></div>
    <div class='secondSection'>Features2</div>
    <div style='clear:both;'></div>
</div>

Answer 3

看看这段代码：

＆＃13;

.layer5 {
  text-align: center;
  margin-top: 20px;
}

.container {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  height: 120px;
  display: block;
}

#imgdiv img {
  width: 100px;
  float: left;
}

#textdiv p {
  border-left: 2px solid green;
  float: right;
  padding-left: 50px;
}

#textdiv2 p {
  float: left;
  border-right: 2px solid green;
  padding-right: 50px;
  border-left: none
}

#imgdiv2 img {
  float: right;
  width: 100px;
}

＆＃13;

<div class="layer5 main">
  <h1>Features</h1>
  <div class="container">
    <div id="imgdiv">
      <img src="http://www.dl.21tech.ir/img-upload/2017/3/95121201.jpg" />
    </div>
    <div id="textdiv">
      <p>This is the text part.</p>
    </div>
  </div>

  <div class="container">
    <div id="imgdiv2">
      <img src="http://www.dl.21tech.ir/img-upload/2017/3/95121201.jpg" />
    </div>
    <div id="textdiv2">
      <p>This is the text part.</p>
    </div>
  </div>
</div>

＆＃13;

我怎么做两个分区，但在之间绘制一个垂直线在CSS

3 个答案: