Question

我有一个图像（'repairPic'），我想向右对齐，这没问题，我想将两个元素（'repairTitle＆repairBtn'）堆叠在左侧。我想使用flexbox，因为我认为这是设置网站的好方法。

我对html和css很陌生，这是我正在从事的第一个实际项目，因此任何帮助将不胜感激！

这是HTML。

    <!DOCTYPE html>
    <html>
    <head>
        <title>Quandtico | Home</title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <header id="top" class="main-header">
            <div class="top-nav">
                <ul class="info">
                    <li><a href="#">quandticoguitars@gmail.com</a></li>
                    <li><a href="#">810-304-2166</a></li>
                    <li id="f1"><a href="#"><img class="fbook" src="imgs/facebook-f-brands.svg"/></a></li>
                </ul>
            </div>
            <div class="main-nav">
                <ul class="nav">
                    <li><h2>Quandtico</h2></li>
                    <li id='home'><a href='#'>Home</a></li>
                    <li><a href='#'>Repair Rates</a></li>
                    <li><a href='#'>About</a></li>
                    <li><a href='#'>Custom Guitars</a></li>
                </ul>
            </div>
        </header>
        <div class="intro">
            <h1 id="quandtico">QUANDTICO GUITARS & REPAIRS</h1>
            <p>Looking for a new guitar? Need a repair done that you want done right? We’ve got it all here at Quandtico. Whether you’re looking for a custom built guitar, the highest quality repair, or just a tune up, we’ve got you covered. We’re located in the thumb of Michigan , and we make sure our customer receives only the best quality products and service. Contact us today to see what we’ve got in store for you!</p>
        </div>
        <div class="main">
            <div class="repair">
                <ul id="repairList">
                    <li class="repairTitle">
                        <h4>Repair</h4>
                    </li>
                    <li class="repairBtn">
                        <button>Repair Rates</button>
                    </li>
                    <li>
                        <img id="repairPic" src="imgs/bald-eagle-flying-water.jpg"/>
                    </li>
                </ul>
            </div>
            <div class="build">
                <h4>Build</h4>
                <button class="build-btn">Custom Guitar</button>
                <img id="buildPic" src="../"/>
            </div>
            <div class="best">
                <img src="../"/>
                <h4>Only The Best</h4>
            </div>
        </div>
        <div class="contact">
            <form action="index.html" method="post">
                <h1>Contact</h1>

                <fieldset>

                  <input placeholder="Name" type="text" id="name" name="user_name">

                  <input placeholder="Email" type="email" id="mail" name="user_email">

                  <input placeholder="Subject" type="text" id="subject" name="subject">

                 <textarea placeholder="Message" cols="50">
                 </textarea>
                 <button class="send">Send</button>
                </fieldset>
            </form>
        </div>
        <footer class="foot">
            <p>quandticoguitars@gmail.com</p>
            <img class="fbook" src="imgs/facebook-f-brands.svg"/>
            <p>&copy by Quandtico.</p>
        </footer>
    </body>
    </html>

这是CSS。我正在特别关注“维修和制造”部分。现在，我只在“修复” div上工作。一旦弄清楚了，就可以继续进行构建部分。

   /* Base Styles ------*/
    * {
        box-sizing: border-box;
    }

    body {
        font-family: 'Anton', sans-serif;
        background-color: #fbeee6;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    a {
        text-decoration: none;
        color: #fbeee6;
    }

    h2 {
        letter-spacing: .2em;
        font-size: 2em;
        padding-left: .8em;
        margin-right: auto;
    }

    .fbook {
        width: 1em;
        height: 1em;
    }

    /* Header Section ---- */

    .main-header {
        background-color: #284c5e;
        color: #fbeee6;
    }

    .top-nav {
        margin-top: 1em;
        border-bottom: 1px solid rgba(251, 238, 230, .25);
    }

    .top-nav .info {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 15%;
        padding-right: 15%;
    }

    .main-nav {
        margin-top: -1em;
    }

    .main-nav .nav {
        display: flex;
        flex-direction: row;
        padding-left: 15%;
        padding-right: 15%;
    }

    .nav li {
        display: inline-flex;
        align-items: center;
    }

    #home {
        margin-left: auto;
    }

    .info a  {
        text-align: center;
        display: block;
        padding: .85em 1.3em;
    }

    .nav a {
        padding-left: 1em;
    }

    #f1 {
        margin-left: auto;
    }

    /* Intro Section -----*/

    .intro {
        width: 100%;
        height: 38em;
        color: #fbeee6;
        text-align: center;
        vertical-align: middle;
        background: url('../imgs/E-kit.jpg') no-repeat center;
        background-size: cover;
    }

    #quandtico {
        letter-spacing: .1em;
        font-size: 5em;
        text-align: center;
        margin: 2em 20% 0 20%;
    }

    .intro p {
        margin-left: 25%;
        margin-right: 25%;
        line-height: 1.5em;
    }

    /* Repair and Build Sections -----*/

    #repairList {
        display: flex;
        flex-wrap: wrap;
        height: 569px;
        width: 100%;
        justify-content: space-between;
    }

    #repairPic {
        display: block;
        margin-left: auto;
    }

    .repairTitle {
        display: inline-flex;
        margin:  auto;
    }

    .repairBtn {
        margin: auto;
    }

Answer 1

您可以修改ID repairList的抄送。

#repairList {
    display: flex;
    flex-wrap: nowrap;
    height: 569px;
    /* width: 100%; */
    justify-content: space-between;
    display: block;
    float: right;
    clear: right;

Answer 2

.repair {
    display: flex; /*added*/
    text-align: center;/*added*/
}
    #repairList {
/*       display: flex */remove
        flex-wrap: wrap;
        height: 569px;
        width: 100%;
        justify-content: space-between;
    }

Answer 3

一种解决方案是将前两个li标签合并为一个，并将每个li标签包装在div中。

<ul id="repairList">
  <li>
    <div class="repairTitle">
       <h4>Repair</h4>
    </div>
    <div class="repairBtn">
        <button>Repair Rates</button>
    </div>
  </li>
  <li>
    <img id="repairPic" src=""/>
  </li>
</ul>

如果您希望避免多余的div，请将h4和按钮设置为显示：块也将起作用。

这些解决方案避免了浮动定位带来的常见问题。

如何将一个flexbox项向右对齐，将两个flexbox靠左对齐？

3 个答案: