html - 将一些元素粘贴到左侧，将其他元素粘贴到右侧，同时保持它们在同一行上对齐

标签 html css css-float css-position footer

我到处搜索了几个小时，但从未找到解决方案。

在我的页脚中，当我们在 1024 像素及以上的屏幕上看到元素时，我希望元素粘在左边，其他元素粘在右边。我尝试定位:绝对和左/右浮动，但当我这样做时，一切似乎都崩溃了。

How I wish it looked

When I add float:right 

footer {
	background-color: #262524;
	text-align: center;
	margin-top: 2.4em;
	bottom: 0em;
	overflow: auto;
}
footer a {
	color: white;
}
footer a:hover  {
	color: #006AEC;
}
.contact {
	width: 1.3em;
	height: auto;
	margin-right: 1em;
	display: none;
}
footer div  {
	padding: 1em 0;
	color: white;
	font-weight: 200;
}
footer div ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	text-transform: uppercase;
}
.social {
	width: 2em;
	margin: 1em 0.3em;
	height: auto;
	display: inline;
}
.social:hover {
	opacity: 0.5;
}
.header {
	text-transform: uppercase;
	padding-top: 2em;
	font-weight: 400;
	font-size: 1.2em;
	color: white;
	display: block;
	width: 100vw;
	padding-bottom: 0.6em;
}
.copyright {
	background-color: #191919;
}
.copyright p {
	margin-top: 1em;
}
.gris {
	color: #999897;
}


@media (min-width: 1024px){
.inline  {
	padding: 0;
	display: inline-block;
	position: relative;
	vertical-align: top;
	width: 24.6%;
}
.floatLeft {
	float: left;
}
.floatRight {
}
footer .inline {
	margin-right: 1em;
	margin-left: 1em;
	width: auto;
}
.right {
	text-align: right;
}
.droit {
}
.left {
	text-align: left;
}
footer {
}
footer .right {
}
.contact  {
	display: inline-block;
}
.header {
	text-align: left;
	padding-left: 1.6em;
}
}
<footer>
  <h6 class="header">Hince Transport</h6>
  <div class="inline floatLeft">
  <div class="inline left">
    <p> 634, Jolin Street,<br>
      Hearst, ON<br>
      Canada<br><br>
      
      P.O. Box 38<br>
      P0L 1N0
      </p>
  </div>
    
   <div class="inline left"><p>TOLL FREE <a href="tel:1-888-900-1658">1-888-900-1658</a><br><br>
   <img src="../images/icon-phone-full.svg" alt="" width="32" height="32" class="contact"/><a href="tel:705-372-6111">705-372-6111</a><br>
   <img src="../images/icon-fax-full.svg" alt="" width="32" height="32" class="contact"/>705-372-6110<br>
   <img src="../images/icon-email.svg" alt="" width="32" height="32" class="contact"/><a href="mailto:ginoh@hincetransport.com">ginoh@hincetransport.com</a></p></div>
   </div>
 
 
  <div class="inline right floatRight droit">
  	<ul class="inline">
  	  <li><a href="index.html">Home</a></li>
  	  <li><a href="about.html">About</a></li>
  	  <li><a href="team.html">Out Team</a></li>
  	  <li><a href="services.html">Services</a></li>
  	  <li><a href="involvement.html">Involvement</a></li>
  	</ul>
  	<ul class="inline">
  	  <li><a href="contact.php">Contact Us</a></li>
  	  <li><a href="gallery.html">Photo Gallery</a></li>
  	  <li><a href="careers.php">Careers</a></li>
  	  <li><a href="rateRequest.php">Rate Request</a></li>
  	  <img src="../images/icon-facebook-white.svg" alt="" class="social"/>
   	  <img src="../images/icon-google-plus-white.svg" alt="" class="social"/></ul>
   	 
  </div>
  
  
  
<div class="copyright">
	<p class="gris inline floatLeft">This webpage developed with assistance by NEOnet Inc.</p>
	<p class="inline floatLeft">Created by <a href="http://mariepierld.ca">Marie-Pier LD Design</a></p>
	<p class="inline">© 2017 HINCE TRANSPORT. All Rights Reserved</p>

</div>
</footer>

PS:对不起，我的代码可能一团糟。我尝试了很多东西来让它工作，但我不是开发人员。

最佳答案

您可以添加 clear 属性以确保清除 float 元素。并且您还可以使用 flexbox 来均匀地间隔元素。

将此 CSS 添加到您的媒体查询中:

 .copyright {
    clear: both;
    display: flex;
    justify-content: space-between;
  }

更多信息:

Float

Flexbox

片段

footer {
  background-color: #262524;
  text-align: center;
  margin-top: 2.4em;
  bottom: 0em;
  overflow: auto;
}

footer a {
  color: white;
}

footer a:hover {
  color: #006AEC;
}

.contact {
  width: 1.3em;
  height: auto;
  margin-right: 1em;
  display: none;
}

footer div {
  padding: 1em 0;
  color: white;
  font-weight: 200;
}

footer div ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-transform: uppercase;
}

.social {
  width: 2em;
  margin: 1em 0.3em;
  height: auto;
  display: inline;
}

.social:hover {
  opacity: 0.5;
}

.header {
  text-transform: uppercase;
  padding-top: 2em;
  font-weight: 400;
  font-size: 1.2em;
  color: white;
  display: block;
  width: 100vw;
  padding-bottom: 0.6em;
}

.copyright {
  background-color: #191919;
}

.copyright p {
  margin-top: 1em;
}

.gris {
  color: #999897;
}

@media (min-width: 1024px) {
  .copyright {
    clear: both;
    display: flex;
    justify-content: space-between;
  }
  .inline {
    padding: 0;
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 24.6%;
  }
  .floatLeft {
    float: left;
  }
  .floatRight {}
  footer .inline {
    margin-right: 1em;
    margin-left: 1em;
    width: auto;
  }
  .right {
    text-align: right;
  }
  .droit {}
  .left {
    text-align: left;
  }
  footer {}
  footer .right {}
  .contact {
    display: inline-block;
  }
  .header {
    text-align: left;
    padding-left: 1.6em;
  }
}
<footer>
  <h6 class="header">Hince Transport</h6>
  <div class="inline floatLeft">
    <div class="inline left">
      <p> 634, Jolin Street,<br> Hearst, ON<br> Canada
        <br><br> P.O. Box 38<br> P0L 1N0
      </p>
    </div>

    <div class="inline left">
      <p>TOLL FREE <a href="tel:1-888-900-1658">1-888-900-1658</a><br><br>
        <img src="../images/icon-phone-full.svg" alt="" width="32" height="32" class="contact" /><a href="tel:705-372-6111">705-372-6111</a><br>
        <img src="../images/icon-fax-full.svg" alt="" width="32" height="32" class="contact" />705-372-6110<br>
        <img src="../images/icon-email.svg" alt="" width="32" height="32" class="contact" /><a href="mailto:ginoh@hincetransport.com">ginoh@hincetransport.com</a></p>
    </div>
  </div>


  <div class="inline right floatRight droit">
    <ul class="inline">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="team.html">Out Team</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="involvement.html">Involvement</a></li>
    </ul>
    <ul class="inline">
      <li><a href="contact.php">Contact Us</a></li>
      <li><a href="gallery.html">Photo Gallery</a></li>
      <li><a href="careers.php">Careers</a></li>
      <li><a href="rateRequest.php">Rate Request</a></li>
      <img src="../images/icon-facebook-white.svg" alt="" class="social" />
      <img src="../images/icon-google-plus-white.svg" alt="" class="social" /></ul>

  </div>



  <div class="copyright">
    <p class="gris inline floatLeft">This webpage developed with assistance by NEOnet Inc.</p>
    <p class="inline floatLeft">Created by <a href="http://mariepierld.ca">Marie-Pier LD Design</a></p>
    <p class="inline">© 2017 HINCE TRANSPORT. All Rights Reserved</p>

  </div>
</footer>

关于html - 将一些元素粘贴到左侧，将其他元素粘贴到右侧，同时保持它们在同一行上对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45510304/

上一篇：html - 如何在调整浏览器窗口大小时阻止 Div 移动

下一篇：wordpress - 我如何覆盖 wordpress 主题中以前的样式？

相关文章：

CSS float 和 div block 位置

html - 将 html 表单与 css 问题对齐

javascript - Google Chrome 是否支持 body onunload() 函数？

java - java servlet 中的 html 表单处理

C# Webkit 不会显示 Html

javascript - 为 2 个 flexbox DIV 设置动画

javascript - AngularJS 模块不加载

html - Bootstrap 4.1 悬停下拉菜单

javascript - 如何让菜单按钮出现在导航栏 Materialize CSS 中？

html - float div不重叠

©2024 IT工具网  联系我们