文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >当我在中间div设置宽度并缩小到25%时，它不是在一行中

问当我在中间div设置宽度并缩小到25%时，它不是在一行中
EN

Stack Overflow用户
提问于 2019-11-10 23:42:32
回答 1查看 23关注 0票数 0

当我在中间的div(section-2)中设置width(310px)并缩小到25%时，它不是在一行中。这是一个问题吗？和解决方案，使它在同一行。

注意:我使用的是google chrome，当缩小到100%时，它在google chrome中看起来很好，但在25%时就不行了。我还提供了图片，以便您可以快速回答。

我需要你的帮助。

​

代码语言：javascript
运行
复制
.structure {
  max-width:1190px;
  padding-left:15px;
  padding-right:15px;
  margin:0 auto;
}

.contact-info-area {
  background:white;
  border-top:1px dashed #ccc;
  border-bottom:1px dashed #ccc;
}

.contact-info-area .contact-info {
  position:relative;
}	

.contact-info-area .contact-info .section-1 {
  float:left;
}

.contact-info-area .contact-info .section-1 .sec:first-child {
  width:70px;
  height:70px;
  background:white;
  float:left;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
}										  

.contact-info-area .contact-info .section-1 .sec:last-child {
  margin-left:23px;
  float:left;
}

.contact-info-area .contact-info .section-1 .sec:first-child .fas.fa-mobile {
  font-size:30px;
  position:relative;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
}																			 

.contact-info-area .contact-info .section-1 .sec:last-child .phone-number-title {
  font-family:avant_garde_cedemi;
  font-size:1.013em; /* 16.208px */
  margin-top:2px;
  letter-spacing:0.075em;
  text-transform:uppercase;
}

.contact-info-area .contact-info .section-1 .sec:last-child .number-1 {
  font-family:avant_garde_cebook;
  font-size:1.013em; /* 16.208px */
  margin-top:21px;
  letter-spacing:0.075em;
}

.contact-info-area .contact-info .section-1 .sec:last-child .number-2 {
  font-family:avant_garde_cebook;
  font-size:1.013em; /* 16.208px */
  line-height:150%;
  letter-spacing:0.075em;
}

.contact-info-area .contact-info .section-1::after {
  content::"";
  display:table;
  clear:both;
}

.contact-info-area .contact-info .section-2 {
  width:310px;
  margin-left:auto;
  margin-right:auto;
}

.contact-info-area .contact-info .section-2 .sec:first-child {
  width:70px;
  height:70px;
  background:white;
  float:left;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
}										  

.contact-info-area .contact-info .section-2 .sec:last-child {
  margin-left:23px;
  float:left;
}

.contact-info-area .contact-info .section-2 .sec:first-child .fas.fa-map-marker-alt {
  font-size:30px;
  position:relative;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
}																		

.contact-info-area .contact-info .section-2 .sec:last-child .address-title {
  font-family:avant_garde_cedemi;
  font-size:1.013em; /* 16.208px */
  margin-top:2px;
  letter-spacing:0.075em;
  text-transform:uppercase;
}

.contact-info-area .contact-info .section-2 .sec:last-child .address-1 {
  font-family:avant_garde_cebook;
  font-size:1.013em; /* 16.208px */
  margin-top:21px;
  letter-spacing:0.075em;
}

.contact-info-area .contact-info .section-2 .sec:last-child .address-2 {
  font-family:avant_garde_cebook;
  font-size:1.013em; /* 16.208px */
  line-height:150%;
  letter-spacing:0.075em;
}

.contact-info-area .contact-info .section-3 {
  float:right;
}

.contact-info-area .contact-info .section-3 .sec:first-child {
  width:70px;
  height:70px;
  background:white;
  float:left;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
}

.contact-info-area .contact-info .section-3 .sec:last-child {
  margin-left:23px;
  float:left;
}

.contact-info-area .contact-info .section-3 .sec:first-child .fas.fa-envelope {
  font-size:30px;
  position:relative;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
}

.contact-info-area .contact-info .section-3 .sec:last-child .email-address-title {
  font-family:avant_garde_cedemi;
  font-size:1.013em; /* 16.208px */
  margin-top:2px;
  letter-spacing:0.075em;
  text-transform:uppercase;
}

.contact-info-area .contact-info .section-3 .sec:last-child .email-address-1 {
  font-family:avant_garde_cebook;
  font-size:1.013em; /* 16.208px */
  margin-top:21px;
  letter-spacing:0.075em;
}

.contact-info-area .contact-info .section-3 .sec:last-child .email-address-2 {
  font-family:avant_garde_cebook;
  font-size:1.013em; /* 16.208px */
  line-height:150%;
  letter-spacing:0.075em;
}

.contact-info-area .contact-info .section-3::after {
  content::"";
  display:table;
  clear:both;
}																		  

.contact-info-area .contact-info::after {
  content:"";
  display:table;
  clear:both;
}
代码语言：javascript
运行
复制
<section class="contact-info-area" id="contact-info">

		<div class="structure">
	
			<div class="contact-info">
	
				<div class="section-1">
					
					<div class="sec">

						<i class="fas fa-mobile"></i>
					
					</div>
					
					<div class="sec">
					
						<h3 class="phone-number-title">PHONE NUMBER</h3>
						
						<p class="number-1">+1 234 456-789</p>
						
						<p class="number-2">+123-456-7890</p>
					
					</div>
					
				</div>
				
				<div class="section-3">
					
					<div class="sec">
					
						<i class="fas fa-envelope"></i>
					
					</div>
					
					<div class="sec">
					
						<h3 class="email-address-title">EMAIL ADDRESS</h3>
						
						<p class="email-address-1">johnsmith@company.com</p>
						
						<p class="email-address-2">youoffice@company.com</p>
					
					</div>
					
				</div>
			
				<div class="section-2">
					
					<div class="sec">
					
						<i class="fas fa-map-marker-alt"></i>
					
					</div>
					
					<div class="sec">
					
						<h3 class="address-title">ADDRESS</h3>
						
						<p class="address-1">8, Belgium, Brussels,</p>
						
						<p class="address-2">Liutte 207 New York, USA</p>
					
					</div>
					
				</div>
			
			</div>
			
		</div>
		
	</section>

​

​

​

​

​

html
css
EN

回答 1

Stack Overflow用户

发布于 2019-11-11 00:44:53

你试过设置页面的纵横比吗？

代码语言：javascript
运行
复制
<meta name="viewport" content="width=device-width, initial-scale=1">

我还建议您使用flexbox进行布局

Flebox Guide

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/58790220

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档