Я хочу иметь 3 изображения рядом друг с другом, не перекрывая друг друга. Вот что я попробовал, но безрезультатно:
h1 {
text-align: center;
font-size: 80px;
line-height: 0.5em;
}
h2 {
text-align: center;
font-size: 40px;
line-height: 0.5em;
}
h3 {
text-align: center;
font-size: 25px;
}
.source,
.data {
width: 100%;
}
.data .camera {
display: inline-block;
white-space: nowrap;
max-width: 30%;
}
<html>
<body>
<div id="title">
<h1>My Webpage</h1>
<h2>It's Totally Awesome</h2>
</div>
<div id="content">
<div class="source" id="cameraFeeds">
<h3>Camera Feeds</h3>
<div class="data">
<div class="camera" id="camera1">
<img src="https://via.placeholder.com/360x240">
<h4>Camera 1</h4>
</div>
<div class="camera" id="camera2">
<img src="https://via.placeholder.com/360x240">
<h4>Camera 2</h4>
</div>
<div class="camera" id="camera3">
<img src="https://via.placeholder.com/360x240">
<h4>Camera 3</h4>
</div>
</div>
</div>
</div>
</body>
</html>
Изображения либо перекрывают друг друга, либо одно идет ниже двух других.
Это макет, который я ищу:
Итак, каждое изображение имеет одинаковую вертикальную позицию, и все 3 находятся рядом друг с другом, без наложения. В идеале размер должен масштабироваться в зависимости от ширины устройства.