#html #css #flexbox
Вопрос:
Как вы можете видеть в приведенном ниже фрагменте. Я пытаюсь разместить весь контент, но он выходит на веб-сайте, особенно на небольших устройствах (например, iphone x), части контента там нет. Есть идеи, как это исправить? Спасибо за любую помощь, так как я не знаю, как это сделать, но, предположительно, что-то с flexbox
* {box-sizing: border-box;padding: 0;margin: 0;}
.row{
display: flex;
}
img{
width:450px;
height:350px;
display: block;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
margin-top:50px;
}
.column1{
margin-top: -30px;
margin-right: 7%;
position:relative;
height: 0%;
}
.column2{
margin-left: 6%;
margin-top: 70px;
position:relative;
}
.text h1{
width:450px;
}
.text h1{
font-family: muli, sans-serif;
font-size: 3.5rem;
font-weight:100;
}
.column2 .cover,.column1 .cover{
bottom:0px;
position:absolute;
opacity: 0.8;
font-family: muli, sans-serif;
font-weight:500;
width: 100%;
height:50px;
display: flex;
justify-content:center;
align-items: center;
color:white;
}
.dark{
background-color: #0E4C92;
}
.light{
background-color: #00B5FD;
}
.icon{
position:absolute;
right:-60px;
top:8%;
width:120px;
height:120px;
border-radius:50%;
box-shadow: 0 0 2px 1px gray;
}
@media (max-width: 960px) {
.row {
flex-wrap: wrap;
margin-top:10%;
margin-bottom: 15%;
justify-content: center;
}
.column1,.column2{
margin-left: 0%;
margin-right: 0%;
}
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/dsl6sbt.css">
</head>
<body>
<div class="container">
<div class="row1 row">
<div class="column1 text">
<h1>Solutions for<br> medical<br> applications</h1>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 2.svg" alt="My Happy SVG"/>
<img src="Fluids.jpg" alt=""></img>
<div class="cover light"><h2>Fluids</h2></div>
</div>
</div>
<div class="row2 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 5.svg" alt="My Happy SVG"/>
<img src="medical.jpg" alt="">
<div class="cover light"><h2>Medical device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 6.svg" alt="My Happy SVG"/>
<img src="SurgicalTools.jpg" alt="">
<div class="cover dark"><h2>Surgical tools and instruments</h2></div>
</div>
</div>
<div class="row3 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="DrugDevice.jpg" alt="">
<div class="cover dark"><h2>Drug delivery device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="Packaging.jpg" alt="">
<div class="cover light"><h2>Packaging</h2></div>
</div>
</div>
<div class="row4 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 3.svg" alt="My Happy SVG"/>
<img src="HomeCare.jpg" alt="">
<div class="cover light"><h2>Home care</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 4.svg" alt="My Happy SVG"/>
<img src="Labware.jpg" alt="">
<div class="cover dark"><h2>Labware</h2></div>
</div>
</div>
</div>
</body>
</html> Комментарии:
1. Абсолютное позиционирование вызывает проблемы, и его следует использовать экономно. Ему редко найдется место в гибких макетах. Я бы начал с этого.
2. так как же поступить с этим по-другому?
3. Трудно сказать, не зная, каковы ваши цели. Вы не были очень конкретны в этом вопросе. Жестко заданные размеры изображений и отрицательные поля вызывают некоторые вопросы.
Ответ №1:
Я думаю, что вы можете достичь того, что ищете, добавив некоторые медиа-запросы и отрегулировав ширину и высоту изображений и значков. Я отредактировал ваш код для экрана размером 320 пикселей, но вы также можете добавить его для экранов размером 768 пикселей и т. Д. Я также более конкретно нацелился на ваши большие изображения, так как просто использовал img в вашем правиле CSS, эти свойства также иногда влияли на ваши изображения значков.
* {box-sizing: border-box;padding: 0;margin: 0;}
.row{
display: flex;
}
img[src$="jpg"]{
width:450px;
height:350px;
display: block;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
margin-top:50px;
}
.column1{
margin-top: -30px;
margin-right: 7%;
position:relative;
height: 0%;
}
.column2{
margin-left: 6%;
margin-top: 70px;
position:relative;
}
.text h1{
width:450px;
}
.text h1{
font-family: muli, sans-serif;
font-size: 3.5rem;
font-weight:100;
}
.column2 .cover,.column1 .cover{
bottom:0px;
position:absolute;
opacity: 0.8;
font-family: muli, sans-serif;
font-weight:500;
width: 100%;
height:50px;
display: flex;
justify-content:center;
align-items: center;
color:white;
}
.dark{
background-color: #0E4C92;
}
.light{
background-color: #00B5FD;
}
.icon{
position:absolute;
right:-60px;
top:8%;
width:120px;
height:120px;
border-radius:50%;
box-shadow: 0 0 2px 1px gray;
}
@media (max-width: 475px){
.text h1 {
width: 90%;
}
.icon {
width: 60px;
height: 60px;
right: -30px
}
img[src$="jpg"]{
width:250px;
height:250px;
display: block;
}
}
@media (max-width: 960px) {
.row {
flex-wrap: wrap;
margin-top:10%;
margin-bottom: 15%;
justify-content: center;
}
.column1,.column2{
margin-left: 0%;
margin-right: 0%;
}
} <body>
<div class="container">
<div class="row1 row">
<div class="column1 text">
<h1>Solutions for<br> medical<br> applications</h1>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 2.svg" alt="My Happy SVG"/>
<img src="Fluids.jpg" alt=""></img>
<div class="cover light"><h2>Fluids</h2></div>
</div>
</div>
<div class="row2 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 5.svg" alt="My Happy SVG"/>
<img src="medical.jpg" alt="">
<div class="cover light"><h2>Medical device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 6.svg" alt="My Happy SVG"/>
<img src="SurgicalTools.jpg" alt="">
<div class="cover dark"><h2>Surgical tools and instruments</h2></div>
</div>
</div>
<div class="row3 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="DrugDevice.jpg" alt="">
<div class="cover dark"><h2>Drug delivery device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="Packaging.jpg" alt="">
<div class="cover light"><h2>Packaging</h2></div>
</div>
</div>
<div class="row4 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 3.svg" alt="My Happy SVG"/>
<img src="HomeCare.jpg" alt="">
<div class="cover light"><h2>Home care</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 4.svg" alt="My Happy SVG"/>
<img src="Labware.jpg" alt="">
<div class="cover dark"><h2>Labware</h2></div>
</div>
</div>
</div>
</body>