更改显示器图像的宽度时：弯曲一切都会中断

问题描述 投票：0回答：1

这就是想要的结果。我希望这三个图像的位置是这样的我正在为火车制作一个网站，我想添加三个图像，但是每次添加它们时我想缩小它们的大小，一切都会破坏图像与文本的重叠，它们会到处都是等。 我刚刚开始编码 html 和 css，知识很少，而且 Flexbox 对我来说仍然是一个新的、令人困惑的东西。我知道这很混乱:)请有人帮忙 

/*fonts*/
@font-face {
    font-family: jost;
    src: url(../fonts/Jost-Regular.ttf);
}

* {
    box-sizing: border-box;
}
body {
    background-color: #ffd7c4;
    color: #424242;
    margin: 0;
    font-family:  jost;
    height: 100vh;

}

.sections-container {
    margin-left: 3%;
    margin-top: 3%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    
    
}

.main-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
.main-section #motto {
    text-align: center;
}
.main-section #about-website {
    text-align:justify;
    font-size: large;

    width: 400px;
    margin-top: 0px;
}

.image-container{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: center;
    width: 200px;
    
}
<!DOCTYPE html>
<html lang="bg">
<head>
    
    <!--meta data-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--tab view-->
    <title>Железопътна страст</title>
    <link rel="icon" href="assets/images/logo.png">

    <!--css files-->
    <link rel="stylesheet" href="assets/css/index.css">
    <link rel="stylesheet" href="components/topbar/topbar.css">

    <!--google fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Unbounded:[email protected]&display=swap" rel="stylesheet">

</head>
<body>    
    <!--the top bar-->
    <div class="top-bar">
        <div class="branding">
            <a href="index.html"><img id="logo" src="assets/images/logo.png" alt="Лого на влак"></a>
            <h2 id="title">Железопътна страст</h2>
        </div>
        <div class="nav-bar">
            <a class="nav-button" href="index.html">Начало</a>
            <a class="nav-button" href="#trains">Влакове</a>
            <a class="nav-button" href="#contacts">Контакти</a>
            <a class="nav-button" href="#aboutme">Повече за мен</a>
        </div>
    </div>   

    <div class="sections-container">
        <!--main section container-->
        <div class="main-section">
            <img src="assets/images/home-page.png" alt="снимка на влак">
            <h2 id="motto">Пътувай по релсите на страстта!</h2>
            <p id="about-website">
                Добре дошли на нашия сайт, посветен на магията на влаковете! 
                Тук ще намерите всичко, което може да ви вдъхнови да се 
                потопите в света на железниците. Пътувайте и открийте 
                несравнимото вълнение от всяко пътуване!
            </p>
        </div>
        <div class="image-container">
            <div class="images"><img src="assets/images/N700A.jpg" alt="train named N700S"></div>
            <div class="images"><img src="assets/images/CR400AF.jpg" alt="train named CR400AF"></div>
            <div class="images"><img src="assets/images/TGV-M.jpg" alt="train named TGV M"></div>
        </div>
    </div>
</body>
</html>

html css
1个回答
0
投票

/*fonts*/
@font-face {
    font-family: jost;
    src: url(../fonts/Jost-Regular.ttf);
}

* {
    box-sizing: border-box;
}
body {
    background-color: #ffd7c4;
    color: #424242;
    margin: 0;
    font-family:  jost;
    height: 100vh;

}

.sections-container {
  margin-left: 3%;
  margin-top: 3%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 2em;
}

.main-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main-section #motto {
  text-align: center;
}

.main-section #about-website {
  text-align:justify;
  font-size: large;
  width: 400px;
  margin-top: 0px;
}

.image-container {
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
}

.image-container img {
  width: 180px;
  height: 120px;
  object-fit: cover;
}
<!DOCTYPE html>
<html lang="bg">
<head>
    
    <!--meta data-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--tab view-->
    <title>Железопътна страст</title>
    <link rel="icon" href="assets/images/logo.png">

    <!--css files-->
    <link rel="stylesheet" href="assets/css/index.css">
    <link rel="stylesheet" href="components/topbar/topbar.css">

    <!--google fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Unbounded:[email protected]&display=swap" rel="stylesheet">

</head>
<body>    
    <!--the top bar-->
    <div class="top-bar">
        <div class="branding">
            <a href="index.html"><img id="logo" src="https://picsum.photos/100"></a>
            <h2 id="title">Железопътна страст</h2>
        </div>
        <div class="nav-bar">
            <a class="nav-button" href="index.html">Начало</a>
            <a class="nav-button" href="#trains">Влакове</a>
            <a class="nav-button" href="#contacts">Контакти</a>
            <a class="nav-button" href="#aboutme">Повече за мен</a>
        </div>
    </div>   

    <div class="sections-container">
        <!--main section container-->
        <div class="main-section">
            <img src="https://picsum.photos/200">
            <h2 id="motto">Пътувай по релсите на страстта!</h2>
            <p id="about-website">
                Добре дошли на нашия сайт, посветен на магията на влаковете! 
                Тук ще намерите всичко, което може да ви вдъхнови да се 
                потопите в света на железниците. Пътувайте и открийте 
                несравнимото вълнение от всяко пътуване!
            </p>
        </div>
        <div class="image-container">
            <div class="images"><img src="https://picsum.photos/300" alt="train named N700S"></div>
            <div class="images"><img src="https://picsum.photos/310" alt="train named CR400AF"></div>
            <div class="images"><img src="https://picsum.photos/320" alt="train named TGV M"></div>
        </div>
    </div>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.