css如何设置梯形容器？

Question

giegie们这种css样式该怎么做啊？左边为图片，右边为内容

Answer 1

你可以使用两个 div 元素来实现左边为图片，右边为内容的布局。

首先，在第一个 div 中使用 background-image 属性设置图片背景，并使用宽度和高度设置容器的大小。

第二个 div 元素中可以包含文本内容或其他元素，你可以使用 float 属性将它浮动到第一个 div 的右边。

这是一个示例代码：

```css
.container {
  position: relative;
  width: 600px;
  height: 400px;
}

.image {
  background-image: url(image.jpg);
  width: 200px;
  height: 400px;
  float: left;
}

.content {
  width: 400px;
  height: 400px;
  float: left;
}

```html
<div class="container">
  <div class="image"></div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Donec eget fermentum augue.
  </div>
</div>

这样就可以在浏览器中看到一个左边是图片，右边是内容的梯形容器了。