Question

如何在同一条线上获取四个小图标而不会干扰＆＃34;帐户自＆＃34; 行？图像继续在该行的右上角。我想为这四个图像创建一个单独的行，无论屏幕大小如何，它们都需要在同一行上。

另外，我如何停止＆＃34;帐号自＆＃34; 排除响应，因为在更改屏幕尺寸时字体会改变大小？

＆＃13;

.section {
	background-color: #5ECCBA;
	margin-left: 1%;
	margin-right: 1%;
	width: 97%;
	white-space: nowrap;
	height: 250px;
	margin-top: 85px;
	margin-bottom: 10px;
	float: left;
	display: block;
}

.section img {
	display: inline-block;
}

#ProfilePic {
	padding-top: 10px;
	padding-left: 10px;
}

h2 {
	display: inline;
	margin-left: 5%;
	margin-top: -70px;
	text-decoration: underline;
}

.accsince {
	float: left;
	display: inline;
	margin-top: -30px;
	margin-left: 30%;
	font-weight:lighter;
}

.inline-block {
	display:inline-block;
	float:left;
	margin-left:5%;
	margin-top: 5%;
}

#map {
	width:100%;
	height:400px;
	background:white;
	margin-top:15px;
	margin-bottom: 70px;
}

＆＃13;

<div class="section">
<img src="img/Linda Profile.png" id="ProfilePic" alt="profile picture" height="40%">
	<h2>Linda *lastname*</h2>
	<p class="accsince">Account since Nov. 7th 2012</p><!--random date-->
	
<div class="inline-block">
	<img src="img/002-big-map-placeholder-outlined-symbol-of-interface.png" alt="add trip" height="20px"></div>
<div class="inline-block">
	<img src="img/004-recycling-bin.png" alt="delete account" height="20px"></div>
<div class="inline-block">
	<img src="img/001-megaphone-outline-of-amplification-tool.png" alt="share account" height="20px"></div>
<div class="inline-block">
	<img src="img/003-add-square-outlined-interface-button.png" alt="add pictures" height="20px"></div>
</div><!--End section-->

＆＃13;

Answer 1

以下是一个简化示例。希望能帮助到你。

我强烈建议使用Bootstrap网格系统。它很容易使用，最重要的是它是有效的。

这是link

＆＃13;

body{
margin:0;
padding:0;
}
.wrapper{
  width:80%;
  background-color: gray;
  margin:0 auto;
}
.pics {
  text-align: center;
}
.inline {
  display:inline-block;
  padding: 0 15px 0 15px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div class="wrapper">
    <div class="pics">
      <div class="inline">HELLO1</div>
      <div class="inline">HELLO2</div>
      <div class="inline">HELLO3</div>
      <div class="inline">HELLO4</div>
    </div>
  </div>
</body>
</html>

＆＃13;

Answer 2

作为所有图标（图像）的容器div添加，需要在单独的行上添加类清除。它清除整行。



    .section {
    	background-color: #5ECCBA;
    	margin-left: 1%;
    	margin-right: 1%;
    	width: 97%;
    	white-space: nowrap;
    	height: 250px;
    	margin-top: 85px;
    	margin-bottom: 10px;
    	float: left;
    	display: block;
    }

    .section img {
    	display: inline-block;
    }

    #ProfilePic {
    	padding-top: 10px;
    	padding-left: 10px;
    }

    h2 {
    	display: inline;
    	margin-left: 5%;
    	margin-top: -70px;
    	text-decoration: underline;
    }

    .accsince {
    	float: left;
    	display: inline;
    	margin-top: -30px;
    	margin-left: 30%;
    	font-weight:lighter;
    }

    .inline-block {
    	display:inline-block;
    	float:left;
    	margin-left:5%;
    	margin-top: 5%;
    }

    #map {
    	width:100%;
    	height:400px;
    	background:white;
    	margin-top:15px;
    	margin-bottom: 70px;
    }
.clear{
clear:both;
}
    <div class="section">
    <img src="img/Linda Profile.png" id="ProfilePic" alt="profile picture" height="40%">
    	<h2>Linda *lastname*</h2>
    	<p class="accsince">Account since Nov. 7th 2012<`enter code here`/p><!--random date-->
    	<div class="clear">
    <div class="inline-block">
    	<img src="img/002-big-map-placeholder-outlined-symbol-of-interface.png" alt="add trip" height="20px"></div>
    <div class="inline-block">
    	<img src="img/004-recycling-bin.png" alt="delete account" height="20px"></div>
    <div class="inline-block">
    	<img src="img/001-megaphone-outline-of-amplification-tool.png" alt="share account" height="20px"></div>
    <div class="inline-block">
    	<img src="img/003-add-square-outlined-interface-button.png" alt="add pictures" height="20px"></div></div>
    </div><!--End section-->

如何在同一行上获得4张图像

2 个答案: