文本框对齐旁边的图像

时间：2020-06-14 19:35:23

标签： html css layout responsive-design alignment

我确定这是一个相对简单的问题，但是经过一番摆弄之后，我发现运气不好，会解决一件事，然后出现另一个问题。如您在下方看到的（这是在台式机上，移动设备完美运行）文本框太大，在文本下方留下了很多空白，有些图像尺寸合适，有些图像太大，头一个看起来最好。想法是图像跨过一侧，然后文本框旁边是相同的高度。

enter image description here

这是手机图片供参考

enter image description here

我不会链接所有HTML和CSS，仅链接相关内容。任何建议都值得欢迎和赞赏。 

<html lang="en" dir="ltr">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
    <meta charset="utf-8" >
    <meta name="description" content="Jordan Squres, mixed martial arts trainer, working out of Oxfordshire">
    <meta name="keywords" content="MMA, martial arts, personal trainer, self defence, exercise">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="autor" content="Descisive Development">
    <link rel="stylesheet" href="styles.css">
    <title>Jordan Squires, Home</title>
</head>
<body >
    <nav class="navbar">
        <a href=" /"class="logo">Jordan Squires</a>
        <input class="menu-btn" type="checkbox" id="menu-btn" />
        <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
            <ul class="menu">
                <li class="navitem"> <a href="index.html">Home</a></li>
                <li class="navitem"> <a href="about.html">About</a></li>
                <li class="navitem"> <a href="clients.html">Clients</a></li>
                <li class="navitem"> <a href="blog.html">Blog</a></li>
                <li class="navitem"> <a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </nav>

<section class="home-hero">
    <div class="flex-container">
        <div class="img-hero">
            <img src="images/portfolio1.jpg" alt="">
        </div>
        <div class="info-hero">
            <h1>Jordan</h1>
            <h2>MMA Instructor</h2>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>
            <br>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <div class="flex-container" id="even">
        <div class="img-hero">
            <img src="images/portfolio2.jpg" alt="">
        </div>
        <div class="info-hero">
            <h1>Shotokan Karate</h1>
            <h2>Black Belt</h2>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>
            <br>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <div class="flex-container">
        <div class="img-hero">
            <img src="images/portfolio3.jpg" alt="">
        </div>
        <div class="info-hero">
            <h1>Jeet Kune Do</h1>
            <h2>Black Belt</h2>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>
            <br>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    <div class="flex-container"id="even">
        <div class="img-hero">
            <img src="images/portfolio4.jpg" alt="">
        </div>
        <div class="info-hero">
            <h1>Brazilian Jiu Jitsu</h1>
            <h2>Purple Belt</h2>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>
            <br>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    <div class="flex-container">
        <div class="img-hero">
            <img src="images/portfolio5.jpg" alt="">
        </div>
        <div class="info-hero">
            <h1>Jordan</h1>
            <h2>MMA Instructor</h2>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>
            <br>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</section>
</body>
</html>

和CSS 

    box-sizing: inherit;
    margin: 0 auto;
    padding: 0;

}

html{
    font-size: 10px;
    max-width: 1300px;
    box-sizing: border-box;
}

body{
    background: var(--white);
}

a{
    color: var(--main-txt);
    text-decoration: none;
}

:root{
    --white: #F1FAEE;
    --outline-color: #000000;
    --bg-color: #1D3557;
    --main-txt: #457B9D;
    --alt-txt: #A8DADC;
    --red: #E63946;

    --ff: 'Montserrat', sans-serif;
    --ff2: 'Poppins', sans-serif;

    --fw-l: 300;
    --fw-n: 400;
    --fw-m: 600;
    --fw-b: 700;

    --fs-1: ;
    --fs-2: ;
    --fs-3: ;
    --fs-p: ;

    --shadow: 0px 7px 10px 0px rgba(0,0,0,.3);
}

/*global style container*/

.container{
    max-width: 1360px;
}

/*Navbar styles*/

.navbar{
    box-shadow: 0px 3px 3px -3px rgb(0, 0, 0);
    width: 100%;
    font-size: 1.8rem;
    font-family: var(--ff2);
}

.navbar ul{
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.navbar ul a{
    display: block;
    padding: 2rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: var(--fw-n)
}

.navbar ul a:hover{
    background-color: var(--bg-color);
    color: var(--white);
}

.navbar .logo{
    float: left;
    display: block;
    font-size: 2rem;
    padding: 1.5rem;
    text-decoration: underline;
    text-decoration-thickness: 0.2rem;
    text-underline-offset: 0.5rem;
}

.navbar .menu{
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

.navbar .menu-icon{
    padding: 2.8rem 2rem;
    position: relative;
    float: right;
    cursor: pointer;
}

.navbar .menu-icon .nav-icon{
    background: var(--bg-color);
    display: block;
    height: .2rem;
    width: 1.8rem;
    position: relative;
    transition: background .2s ease-out;
}

.navbar .menu-icon .nav-icon:before{
    background: var(--bg-color);
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: .5rem;
}

.navbar .menu-icon .nav-icon:after{
    background: var(--bg-color);
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -.5rem;
}

.navbar .menu-btn{
    display: none;
}

.navbar .menu-btn:checked ~ .menu{
    max-height: 36rem;
}

.navbar .menu-btn:checked ~ .menu-icon .nav-icon{
    background: transparent;
}

.navbar .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
}

.navbar .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
}

/*Homepage main section*/
.home-hero{
 margin: 1rem auto;
}

.flex-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
}

.img-hero{
    width: 90%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-bottom: -3px;
}

.info-hero{
    width: 90%;
    font-family: var(--ff);
    border:  1px solid var(--outline-color);
    padding: 3rem;
    background-color: var(--bg-color);
}

/*Image styles*/
.img-hero img{
    max-width: 100%;
    object-fit: contain;
    max-height: 100%;
    margin-bottom: -3px;
    border: 1px solid var(--outline-color);
}
/*Info styles*/
.info-hero h1{
    font-size: 3rem;
    color: var(--white);
}

.info-hero h2{
    font-size: 2rem;
    font-style: italic;
    color: var(--red);
}

.info-hero h1 h2{
    font-family: var(--ff2);
}

.info-hero p{
    font-size: 1.2rem;
    text-align: justify;
    color: var(--alt-txt);

}
/*Media for Navbar*/

@media (min-width: 760px) {
    .navbar{
        height: 6.7rem;
    }

    .navbar li{
        float: left;
    }
    .navbar li a{
        padding: 2rem 2.5rem;
    }
    .navbar .menu{
        clear: none;
        float: right;
        max-height: none;
    }

    .navbar .menu-icon{
        display: none;
    }

    .navbar .logo{
        padding: 2rem;
    }

    .flex-container{
        flex-direction: row;
        margin: 2rem auto;
    }

    .img-hero{
        width: 50%;
        margin: inherit;
    }

    .info-hero{
        width: 45%;
        padding: 2rem;

    }

    #even{
        flex-direction: row-reverse;
    }
}

1 个答案:

答案 0 :(得分：0)

这是我刚刚为您编写的一个简单示例，您可以根据需要进行调整。 

.flex-container {
  display: flex;
  margin-bottom: 1rem;
}

.img-hero, .info-hero {
  max-width: 50%;
}

.img-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-hero {
  background: violet;
  color: white;
}

.info-hero > * {
  padding: 0.5rem 1rem;
}
<div class="flex-container">
  <div class="img-hero">
    <img src="https://picsum.photos/900/700" alt="">
  </div>
  <div class="info-hero">
    <h1>Jordan</h1>
    <h2>MMA Instructor</h2>
    <br>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      <br>
      <br>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<div class="flex-container">
  <div class="info-hero">
    <h1>Jordan</h1>
    <h2>MMA Instructor</h2>
    <br>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      <br>
      <br>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
    <div class="img-hero">
    <img src="https://picsum.photos/800/600" alt="">
  </div>
</div>

相关问题
最新问题