电脑pc端时尚左右交替图文布局（非自适应）
效果图
css代码
<style>
.container {
display: flex;
flex-wrap: wrap;
padding: 0 10%;
margin-top: 5%;
}
.container2 {
display: flex;
flex-wrap: wrap;
padding: 0 10%;
}
.item {
width: 50%;
padding: 20px;
height:725px;
box-sizing: border-box;
}
.text-left {
order: 1; /* 控制布局顺序 */
margin:0 0 50px 0;
padding-right: 5%;
}
.image-right {
order: 2; /* 控制布局顺序 */
margin:0 0 50px 0;
}
.text-right {
order: 3; /* 控制布局顺序 */
margin:0 0 50px 0;
}
.image-left {
order: 4; /* 控制布局顺序 */
margin:0 0 50px 0;
}
.text {
margin-bottom: 10px;
}
.d-text-right {
margin-bottom: 10px;
margin-left:10%;
}
.d-image {
width: 100%;
height: auto;
height:725px;
}
.hr-w{
border: none; /* 移除默认边框 */
border-top: 3px solid #ef7800; /* 设置左边框为实线，颜色为黑色 */
height: 0px; /* 设置竖线的高度 */
width: 50px; /* 竖线默认宽度为0，仅显示边框 */
margin: 0 auto; /* 居中显示竖线 */
float: left;
}
.d-title2{
color:#ef7800;
font-size: 4em;
font-weight: bold;
margin:20px 0px 20px 0;
}
.d-title3{
margin-top: 60px;
margin-bottom:50px;
font-size: 3em;
}
.d-p{
font-size: 1em;
font-size: 20px;
line-height: 1.6;
text-indent: 2em;
text-align: justify;/*两端对齐*/
}
.d-ul {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
line-height: 2;
}
.d-ul li {
list-style-type: disc;
}
</style>html代码
<div class="container">
<div class="item text-left">
<div class="text">
<h1>品牌简介丨Brand Introduction</h1>
<h1 class="d-title2">Craftsmanship<br>
in Details
</h1>
<hr class="hr-w">
<h1 class="d-title3">格物咫尺·方寸匠心</h1>
<p class="d-p">xxx品牌凭借其在模块化、装配式及多元化墙体系统领或的专业研发、创新与高效生产，正迅速薪露头角，成为行业内耀眼的新星。xxx秉承打造符合国际先进标准的空间产品理念，致力于提供一站式、全覆盖的装配式内装系统解决方案解决”的市场定位，彰显了xxx在细节中追求卓越的现代工匠底蕴。</p>
</div>
</div>
<div class="item image-right">
<img class="d-image" src="" alt="Placeholder Image">
</div>
<div class="item text-right">
<img class="d-image" src="" alt="Placeholder Image">
</div>
<div class="item image-left">
<div class="d-text-right">
<h1>品牌理念丨Brand Concept</h1>
<h1 class="d-title2">Great Fair</h1>
<hr class="hr-w">
<h1 class="d-title3">全面装配·杰出事业·诚信品格</h1>
<h1>全面装配(<span style="color: #ef7800;">卓越产品与高效服务</span>)</h1>
<ul class="d-ul">
<li>xxx承诺提供高品质的产品和服务，注重细节规范，以人为本精益求精。</li>
<li>xxx重视创新和持续卖改进，利用新技术和新工艺来提升产品性能和美学。</li>
</ul>
<h1>杰出事业 (<span style="color: #ef7800;">社会贵任与市场领导</span>)</h1>
<ul class="d-ul">
<li>格尔倡导无解可击的客户体验，深度了解客户需求，满足愿望解决问题。</li>
<li>格尔追求的不只是商业利益，还致力于社会的进步和行业的可持续发展。</li>
<li>xxx支持社会公益项目，保护环境，弘扬生态文明理念，共筑绿色家园。</li>
<li>格尔致力于提升整个行业产业链的高质量融通发展，无缝合作共生共赢。</li>
</ul>
<h1>诚信品格 (<span style="color: #ef7800;">道德准则与信任建立</span>)</h1>
<ul class="d-ul">
<li>xxx秉承诚信商誉，与客户、合作伙伴和员工之间建立深厚的信任关系。</li>
<li>xxx在业务实践中坚持道德则和公平合规，不畏惧挑战行事光明磊落。</li>
<li>xxx对内外部益相关者负责，确保信息的真实性和及时性，遵纪守法。</li>
</ul>
</div>
</div>
</div>
<div class="container2">
<div class="item text-left">
<div class="text">
<h1>品牌愿景丨Brand Vision</h1>
<h1 class="d-title2">Innovation
<br>
Pioneer
</h1>
<hr class="hr-w">
<h1 class="d-title3">成为装配式建筑内装系统领域<br>
的创新先锋和品质标杆
</h1>
<p class="d-p">
我们的愿景定位于装配式建筑内装领域的最前沿，致力于塑造成为这一行业的创新领航者及卓越品质的典范。我们旨在通过引入尖端的建材技术和实践领先的环保设计哲学，来设定行业的发展潮流和标准。我们追求的是为建筑环境注入更丰富的色彩与活力，使之不仅满足实用性需求，更提升至艺术与美学的层次，让每一座建筑都成为灵感与创意的舞台。
</div>
</div>
<div class="item image-right">
<img class="d-image" src="" alt="Placeholder Image">
</div>
</div>