Html 如何将一个flexbox项目右侧对齐，将两个项目堆叠在左侧？_Html_Css

Html 如何将一个flexbox项目右侧对齐，将两个项目堆叠在左侧？

html css

Html 如何将一个flexbox项目右侧对齐，将两个项目堆叠在左侧？,html,css,Html,Css,我有一个图像（'repairPic'）我想对齐到右边，这没有问题，还有两个元素（'repairptitle&repairBtn'）我想堆叠在左边，彼此重叠。我想使用flexbox，因为我认为这是一个建立网站的好方法我对html和css非常陌生，这是我第一个真正的项目，所以非常感谢您的帮助这是HTML <!DOCTYPE html> <html> <head> <title>Quandtico | Home

我有一个图像（'repairPic'）我想对齐到右边，这没有问题，还有两个元素（'repairptitle&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>

您可以修改id维修列表的ccs

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

。修复{
显示：flex；/*已添加*/
文本对齐：居中；/*已添加*/
}
#修理单{
/*显示：flex*/remove
柔性包装：包装；
高度：569px；
宽度：100%；
证明内容：之间的空间；
}

一种解决方案是将前两个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和按钮设置为display:block也会起作用

这些解决方案避免了因浮动定位而产生的常见问题。

不显示：flex to repairList将该属性添加到repair classThank！这个答案让我想到创建两个不同的FlexBox，第一个是repairTitle和repairBtn，第二个是整个列表。我将第一个flexbox设置为列方向，第二个设置为行方向。非常感谢你！

<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>