时间戳

首页 > 解决方案 > 我无法将页脚向右对齐

html - 我无法将页脚向右对齐

问题描述

我想知道是否有人可以帮助我解决 CSS 主题。

我正在通过 CSS 创建一个页面模型，但事实证明有一部分与其他部分不一样。

如下所示：

在此处输入图像描述

它应该看起来像这样，就像下图中的页脚一样。

你有什么想法吗？我将用于 CSS 的代码留在这里。

在此处输入图像描述

我附上了使用的 HTML 和 CSS 代码。

我试图移动高度和宽度，但找不到解决方案。

    <!--Inicio de pie de página-->
    <div class="clearfix"></div>
    <footer id="footer">
        <div class="wrap">

            <div id="menu_footer">
                <h5>Menú</h5>
                <ul>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Blog Personal</a></li>
                    <li><a href="#">Currículum</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </div>

            <div id="location">
                <h5>¿Dónde estamos?</h5>
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3037.4968410733713!2d-3.690925684351!3d40.41999606336424!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42289a4a865227%3A0x98278b3a144a86f1!2sPuerta%20de%20Alcal%C3%A1!5e0!3m2!1ses!2ses!4v1599489227264!5m2!1ses!2ses"
                    width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
                    tabindex="0">
                </iframe>

                <div id="info">
                    <h5> Desarrollado con</h5>
                    <p>
                        <img src="img/html5-badge-h-css3-graphics-multimedia-performance-semantics.png"
                            alt="Creado con HTML y CSS">
                    </p>

                    <h5>Optimizado para</h5>
                    <p id="browsers">
                        <a href="#">
                            <img src="img/firefox-icon.png" alt="Firefox" title="Firefox">
                        </a>

                        <a href="#">
                            <img src="img/chrome.png" alt="chrome" title="Chrome">
                        </a>

                        <a href="#">
                            <img src="img/Opera_256x256.png" alt="Opera" title="Opera">
                        </a>

                        <a href="#">
                            <img src="img/safari.png" alt="Safari" title="Safari">
                        </a>

                        <a href="#">
                            <img src="img/android.png" alt="Android" title="Android">
                        </a>

                        <a href="#">
                            <img src="img/ios.png" alt="Apple" title="Apple">
                        </a>
                    </p>


                    <h5>Autor</h5>
                    <p>&COPY;Cristina Martínez - acmartinez96.blogspot.com</p>

                </div>

            </div>

        </div>
    </footer>
    <!--Fin de pie de página-->

</body>

</html>

/页脚/

#footer h5
display: block;
background: url(../img/pxgray.png), white;
height: 55px;
letter-spacing: 2px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
line-height: 55px;
color: black;
border-radius: 5px;
margin-bottom: 15px;



#footer ul
text-align: left;
margin: 20px;
font-size: 25px;


#footer ul li
margin-top: 10px;
padding: 5px;
border-bottom: 1px solid #cccccc;


#footer ul li a
display: block;
height: 40px;


#footer iframe
width: 100%;
height: 300px;
margin-top: 10px;
border-radius: 5px;
box-shadow: 0x 0px 5px grey;
border: 5px solid white;
}

#footer img
margin-bottom: 15px;


#footer #browsers img{
width: 45px;

谢谢！

标签： htmlcss

解决方案

尝试使用flexbox非常有帮助。

您要求的渲染可以通过这种方式简单地完成

<div class="flex">
  <div class="ll">Menu</div>
  <div class="ll">Map</div>
  <div class="ll">Footer</div>
</div>

div.ll {
  background: #fff;
  margin: 20 auto;
  width: 200px;
  padding: 50px;
  text-align: center;
}
div.flex {
  display: flex;
}

您可以使用沙箱对其进行测试

推荐阅读