包含图像的Div需要更多的空间

2022-10-15 05:47:23标签htmlcssfooter
提问

我正在创建一个页脚部分,由于某些原因,一个部分中的div需要比需要更多的宽度。我如何解决这个问题? 这就是它的外观: 这是我的代码: 你没有解释你的结果,但我假设你想要所有的flex孩子都有相同的宽度:只要增加弹性,在决定他们的长度的时候,100%给flex孩子一个相同的“重量”。 我刚刚删除了正当的内容:空格之间的空间,并减少了这个# footer 。container的边缘 您不需要显示:flex;在您的。容器中。 您可以设置它来显示:相对;设置一个最小宽度:100px;例如将这些项对齐到完全

footer {
  background-color: #1a1a1a;
  height: 100%;
  padding: 4rem;
}
#footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
#footer .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* justify-content: center; */
  margin: 0 2rem;
}
#contact-handle {
  width: 400px;
}
#contact-handle img {
  width: 40%;
  position: relative;
  right: 0.5rem;
}
#footer h4 {
  color: white;
  font-weight: 500;
  font-size: 18px;
}
#footer p {
  color: grey;
  font-size: 1rem;
  margin: 0;
  margin-bottom: 1rem;
  text-align: left;
}
#footer i {
  color: grey;
  margin-right: 1rem;
}
#footer .button {
  display: flex;
}
#footer .button img {
  width: 15%;
  margin-right: 1rem;
}
<footer>
  <section id="footer">
    <div id="contact-handle" class="container">
      <img src="images/logo.png" alt="">
      <h4>Contact</h4>
      <p>Address: XXX ABCDE Road, Street 32, Mumbai</p>
      <p>Phone: (+91) 01234 56789/(+01) 2222 365</p>
      <p>Hours: 10:00 - 18:00, Mon - Sat</p>
      <br>
      <h4>Follow Us</h4>
      <div class="social_media">
        <i class="fa-brands fa-facebook-f"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-instagram"></i>
        <i class="fa-brands fa-youtube"></i>
      </div>
    </div>
    <div id="About" class="container">
      <h4>About</h4>
      <br>
      <p>About Us</p>
      <p>Delivery Information</p>
      <p>Privacy Policy</p>
      <p>Terms & Conditions</p>
      <p>Conatct Us</p>
    </div>
    <div id="Account" class="container">
      <h4>My Account</h4>
      <br>
      <p>Sign In</p>
      <p>View Cart</p>
      <p>My Wishlist</p>
      <p>Track Order</p>
      <p>Help</p>
    </div>
    <div id="App_gateway" class="container">
      <h4>Install App</h4>
      <br>
      <div class="button box">
        <img src="images/Footer-img/app-store.png">
        <img src="images/Footer-img/google-play.png">
      </div>
  </section>
</footer>

回答

footer {
  background-color: #1a1a1a;
  height: 100%;
  padding: 4rem;
}
#footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}
#footer .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* justify-content: center; */
  /*margin: 0 2rem;*/
  flex-basis: 100%;
}
#contact-handle {
  width: 400px;
}
#contact-handle img {
  width: 40%;
  position: relative;
  right: 0.5rem;
}
#footer h4 {
  color: white;
  font-weight: 500;
  font-size: 18px;
}
#footer p {
  color: grey;
  font-size: 1rem;
  margin: 0;
  margin-bottom: 1rem;
  text-align: left;
}
#footer i {
  color: grey;
  margin-right: 1rem;
}
#footer .button {
  display: flex;
}
#footer .button img {
  width: 15%;
  margin-right: 1rem;
}
<footer>
  <section id="footer">
    <div id="contact-handle" class="container">
      <img src="images/logo.png" alt="">
      <h4>Contact</h4>
      <p>Address: XXX ABCDE Road, Street 32, Mumbai</p>
      <p>Phone: (+91) 01234 56789/(+01) 2222 365</p>
      <p>Hours: 10:00 - 18:00, Mon - Sat</p>
      <br>
      <h4>Follow Us</h4>
      <div class="social_media">
        <i class="fa-brands fa-facebook-f"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-instagram"></i>
        <i class="fa-brands fa-youtube"></i>
      </div>
    </div>
    <div id="About" class="container">
      <h4>About</h4>
      <br>
      <p>About Us</p>
      <p>Delivery Information</p>
      <p>Privacy Policy</p>
      <p>Terms & Conditions</p>
      <p>Conatct Us</p>
    </div>
    <div id="Account" class="container">
      <h4>My Account</h4>
      <br>
      <p>Sign In</p>
      <p>View Cart</p>
      <p>My Wishlist</p>
      <p>Track Order</p>
      <p>Help</p>
    </div>
    <div id="App_gateway" class="container">
      <h4>Install App</h4>
      <br>
      <div class="button box">
        <img src="images/Footer-img/app-store.png">
        <img src="images/Footer-img/google-play.png">
      </div>
  </section>
</footer>

回答

footer {
  background-color: #1a1a1a;
  height: 100%;
  padding: 4rem;
}
#footer {
  display: flex;
  align-items: flex-start;
}
#footer .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* justify-content: center; */
  margin: 0 1rem;
}
#contact-handle {
  width: 400px;
}
#contact-handle img {
  width: 40%;
  position: relative;
  right: 0.5rem;
}
#footer h4 {
  color: white;
  font-weight: 500;
  font-size: 18px;
}
#footer p {
  color: grey;
  font-size: 1rem;
  margin: 0;
  margin-bottom: 1rem;
  text-align: left;
}
#footer i {
  color: grey;
  margin-right: 1rem;
}
#footer .button {
  display: flex;
}
#footer .button img {
  width: 15%;
  margin-right: 1rem;
}
<footer>
  <section id="footer">
    <div id="contact-handle" class="container">
      <img src="images/logo.png" alt="">
      <h4>Contact</h4>
      <p>Address: XXX ABCDE Road, Street 32, Mumbai</p>
      <p>Phone: (+91) 01234 56789/(+01) 2222 365</p>
      <p>Hours: 10:00 - 18:00, Mon - Sat</p>
      <br>
      <h4>Follow Us</h4>
      <div class="social_media">
        <i class="fa-brands fa-facebook-f"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-instagram"></i>
        <i class="fa-brands fa-youtube"></i>
      </div>
    </div>
    <div id="About" class="container">
      <h4>About</h4>
      <br>
      <p>About Us</p>
      <p>Delivery Information</p>
      <p>Privacy Policy</p>
      <p>Terms & Conditions</p>
      <p>Conatct Us</p>
    </div>
    <div id="Account" class="container">
      <h4>My Account</h4>
      <br>
      <p>Sign In</p>
      <p>View Cart</p>
      <p>My Wishlist</p>
      <p>Track Order</p>
      <p>Help</p>
    </div>
    <div id="App_gateway" class="container">
      <h4>Install App</h4>
      <br>
      <div class="button box">
        <img src="images/Footer-img/app-store.png">
        <img src="images/Footer-img/google-play.png">
      </div>
  </section>
</footer>

回答

▼版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看
在给定的路径中只下载最后一个文件夹
昂首阔步(Asp).Net Core)有控制器描述吗?
我试图从有表的html中生成pdf.html文件本身是由自由营销者产生的 示例html / css是https://co,io/codasif/pen/wnzvyjb 蓝色的divs漂浮着漂浮着:左边.然而,输出pdf似乎扭曲了蓝色的divs,而不是在html中出现,也没有被删除.表头也丢失了. 任何我做错的事情的指针. Java代码很简单: 我更新了宽度,表现在适合页面宽度,但div仍然溢出,表头丢失.
日志含义加载组件rasa失败
如何保持HTML/CSS元素固定,而不是抖动/调整每次以上元素动画被触发?
我一直在摆弄CanvasRenderingContext2D javascript界面,我一直在运行SBOX_FATAL_MEMORY_EXCEEDED错误,浏览器窗口崩溃. 我努力将问题分离出来,并将其缩减为一个最小的例子.但现在我有两个版本一个可以用,另一个不行据我所知,它们应该是完全一样的.它似乎与某些CanvasRenderingContext2D调用有关,在for循环中发生.即使那些for循环被显式设置为只运行一次. html只是一个空白的画布: &lt;canvas i
启用在STM32CUBEIDE中中断丢失
片段popBackStack没有显示之前的片段
我想在星期六到星期五订一个出勤率. 我怎样才能实现它呢? 您可以在工作日的时候,在queryset上使用order_by和week_Day组合. 类似这样的东西: 这将在工作日的工作日,从sat到周日 周日和七天是星期六. 这应该做你想做的事: 根据《宣言》:“从1(周日)到7(周六)的时间,取一个整数值.“你只需要获得工作日的价值,并采取7个模块化的标准.
如何识别excel文件中某些id的不同重复记录,但使用Python跨不同事件

错说cuoshuo.com——程序员的报错记录

部分内容根据CC版权协议转载,如果您希望取消转载请发送邮件到cuoshuo8@163.com

辽ICP备19011660号-5