如何以交替样式对齐图像和文本

Question

我正在尝试创建一个交替的“关于我们”部分，其中一名成员的照片在左侧，描述在右侧。下一位成员将在左侧显示他们的描述，然后在右侧显示他们的图像。

我尝试使用另一个模板进行设置，但效果不太好。左边对齐的图像很好，但描述的文本有点太靠近了。右对齐的图像不会一直到边界的尽头。它们漂浮在右侧区域，但不占据该部分的整个宽度。

此外，我正在努力让它在所有内容都居中的移动设备上很好地格式化（居中的图像及其后面的描述）。现在，描述在中心看起来有点压扁，大边距占据了 space。此外，右对齐的图像不会正确居中。

我认为这不是解决问题的最佳方法，但欢迎任何建议或指导！

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>
<link href=https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900|Ubuntu:400,500,700 rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media only screen and (min-device-width: 320px) and (max-device-width: 640px){ /*Desktop*/
img, img2 {
    width: 100%;
    height: 100%;
    display: inline-block;
    padding: 15px;
    float: center;
}
.container {
    padding: 2px;
    height: auto;
    width: auto;
    
}
}

@media only screen and (min-device-width: 320px) and (max-device-width: 640px){ /*Desktop*/
h1 {
    text-align: center;
    width: 100%;
    height: 100%;
    display: inline-block;
}
h4 {
    text-align: left;
    width: 100%;
    height: 100%;
    display: inline-block;
    
}
}

img {
    float: left;
    -webkit-float: left;
    padding: 30px;
    clear: both;
}
img2 {
    float: right;
    -webkit-float: right;
    padding: 30px;
    clear: both;
    
}
.container {
    width: auto;
    height: auto;
    padding: 57px;
    
}
h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 26px;
    color: #5e5c5c;
    text-align: center;

}
h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #5e5c5c;
    line-height: 1.25;
}
li {
    margin: 10px;

}
</style>
</head>
<body>

        <!-----#Michael----->
<div class='container'>
        <div>
            <img src="https://i.postimg.cc/9QsRxd2q/Michael.png" alt="Michael"/ width="25%" height="25%">
        </div>  
    <div>
    <ul>
    <h1><br /><b>Michael Schlaefer, CEO</b></h1>
    <h4><li>Owner of Global Development Contractors, LLC; Plymouth Industries, LLC; Liberty Stone & Aggregates - Clinton Quarry, LLC; Vision Development Group, LLC; and Green Earth Container Service, LLC.</li>
    <li>Over 40 years of experience in site work; demolition; remediation; trucking material management, facility operations, complex brownfield and landfill redevelopment projects.</li>
    <li>Board member – Tewksbury Environmental Commission</li></h4>
    </ul>
    </div>
</div>

        <!-----#Jen----->
<div class='container'>
        <div>
            <img2><img src=https://i.postimg.cc/nhX9YdyJ/Jen.png alt="Jen"/ width="60%" height="60%"></img2>
        </div>  
    <div>
    <ul>
    <h1><br /><br /><b>Jennifer D. Kraft, COO</b></h1>
    <h4><li>In-house counsel for Global Development Contractors, LLC with extensive experience with material management, operations, site development and compliance with environment regulations.</li>
    <li>Chair – Tewksbury Board of Health</li>
    <li>Member – Professional Women in Construction (PWC)</li></h4>
    </ul>
    </div>
</div>
</body>
</html>

Answer 1

这应该可以为您完成。

.container {
  display: flex;
}

.container:nth-of-type(even) {
  flex-direction: row-reverse;
}

查看 CSS flexbox 了解详细信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

JSFiddle：https://jsfiddle.net/Currell/g7t6mu2j/

如何以交替样式对齐图像和文本

How to align images and text in an alternating style

html

css

format

mobile