Html 在CSS中创建图像拼贴

我正在做一个项目，我到了一个地方，我决定实现一个拼贴。 我已经完成了拼贴，它就在这里：

但是我想做同样的事情，而不在

div1

的元素上使用属性

float

如果可能，我只想在

div1

的元素上使用

right

和

left

属性，而不减少该div元素的大小

---

对不起，我不是以英语为母语的人，我正在尽最大努力。

您可以使用display:flex；这样你就不必使用float了

正文{
/*宽度：520px*/
保证金：0自动；
}
/*.1分区p{
页边距底部：0；
边际上限：0；
}*/
.1分部{
显示器：flex；
证明内容：中心；
}
.第2分部{
显示器：flex；
证明内容：中心；
}

---

这就是你想要的。但我建议不要采用这种方法。延长这一期限将是一场噩梦。如果图像大小发生变化，那么仅仅使用CSS是不可能修复的

正文{
宽度：380px；
保证金：0自动；
}
.1分部{
位置：相对位置；
高度：324px；
}
.1分区p{
页边距底部：0；
边际上限：0；
宽度：50%；
位置：绝对位置；
}
.第一组p：第一个孩子{
左：0px；
}
.第一组p：最后一个孩子{
左：50%；
}

希望您能看到以下内容：

正文{
宽度：380px；
保证金：0自动；
}
.1分部{
文本对齐：对齐；
}
.第一组：之后{
内容：“；
显示：内联块；
宽度：100%；
}
.1司跨度图{
宽度：45%；
}

Fiddle链接不存在。帖子已更新。谢谢，正在运行。您知道如何使用

div1

元素上的属性

right

left

进行相同的显示吗？我个人会使用Flexbox进行显示谢谢您的帮助，我的项目响应迅速，因此确保图像大小会根据屏幕大小而变化。你能帮我修复这个CSS代码吗？为什么你想保留这个特定的代码？正如我之前所说的，您不能仅使用CSS使此代码具有响应性。您将需要JS帮助，这不是一个好的做法。我正在处理的项目是一个使用名为

owlcarousel

的插件制作的旋转木马。当我使用

display:flex

或

display:table

时，旋转木马制作的拼贴画无法正确显示，我在某些浏览器上确实存在一些问题。