Question

非常新的CSS，如果这很简单，那么道歉。

我目前正在上课的一个页面。有一个部分需要在各自的标题上方浮动图标（咖啡，音符，食物和服务员）。我试过浮动和清除各种元素。我希望我只是忽略了一些简单的事情！

我无法以任何方式编辑HTML，或者我会在作业中收到零，我只能使用CSS。

我在发布代码时遇到问题，所以我希望可以分享这些链接。

HTML https://github.com/melonysmith/dws1/blob/gh-pages/DWS1-Practical/index.html

CSS https://github.com/melonysmith/dws1/blob/gh-pages/DWS1-Practical/css/styles.css

欢迎提供任何帮助和建议，非常感谢！

编辑：发布了HTML和CSS。我确实让图标居中于标题之上，但我似乎无法弄清楚如何获得＆＃34;促销＆＃34;部分以页面的其余部分为中心，包括图标，标题和段落。

<!-- begin promo -->
    <section id="promo">

        <div id="promo-first-col" class="promo-col">

             <h3 id="coffee">Imported Coffee</h3>

             <p>Checkout our various tyes of imported coffee.</p>               

        </div>

        <div class="promo-col">

             <h3 id="music">Great Music</h3> 

             <p>Our DJs will entertain you like never before.</p>               

        </div>

        <div class="promo-col">

             <h3 id="food">Finest Cuisine</h3>

             <p>From Italian to Tex-Mex, you will find all types of food</p>                

        </div>

        <div class="promo-col">

             <h3 id="service">Nice Staff</h3>

             <p>You will never forget our smile and professional attitude.      </p>                

        </div>

    </section>
    <!-- end promo -->



#promo {
display: inline-block;
width: 100%;
background-color: #fff;
display: inline-block;
padding-bottom: 50px;
margin: 0 auto;
}

#promo p {
background-color: #fff;
width: 255px;
text-align: center;
margin: 0 auto;
}   

#promo h3 {
background-color: #fff;
width: 255px;
text-align: center;
padding-top: 80px;
margin: 0 0 50px 0;
}

.promo-first-col {
display: inline-block;
background-color: #fff;
text-align: center;
width: 255px;
margin: 0 auto;
padding-top: 20px;
}

.promo-col {
display: inline-block;
background-color: #fff;
text-align: center;
width: 255px;
margin:0 auto;
padding-top: 20px;
}   

#coffee {
float: left;
width: 255px;
background: #fff;
background-image: url("../images/ico_coffee.png");
background-position: center top; 
line-height: 25px;
background-repeat: no-repeat;
text-align: center;
padding-top: 10px;
padding-right: 30px;
float: left;
}           

#music {
float: left;
width: 255px;
background: #fff;
line-height: 25px;
background-image: url("../images/ico_music.png");
background-position: center top; 
background-repeat: no-repeat;
text-align: center;
padding-top: 10px;
padding-right: 30px;
float: left;  
}       

#food {
float: left;
width: 255px;
background: #fff;
line-height: 25px;
background-image: url("../images/ico_food.png");
background-position: center top; 
background-repeat: no-repeat;
text-align: center;
padding-right: 30px;
float: left;
}

#service {
float: left;
width: 255px;
background: #fff;
line-height: 25px;
background-image: url("../images/ico_service.png");
background-position: center top; 
background-repeat: no-repeat;
text-align: center;
padding-top: 10px;
padding-right: 30px;
float: left;
clear: both;
}

.clear {
clear: both;
}

编辑2：尝试尝试发布一个片段。我是新来的，原谅我的尴尬！

所有图像，标题和段落应该在标题上方的图像和段落上方的标题的行中彼此相邻。那部分我已经想通了。可能需要更多代码来解释，但这整个＆＃34;促销＆＃34; div位于页面其余部分的左侧，该页面居中。

＆＃13;

#promo {
	display: inline-block;
	width: 100%;
	background-color: #fff;
	display: inline-block;
	padding-bottom: 50px;
	margin: 0 auto;
}
	
#promo p {
	background-color: #fff;
	width: 255px;
	text-align: center;
	margin: 0 auto;
}	

#promo h3 {
	background-color: #fff;
	width: 255px;
	text-align: center;
	padding-top: 80px;
	margin: 0 0 50px 0;
}

.promo-first-col {
	display: inline-block;
	background-color: #fff;
	text-align: center;
	width: 255px;
	margin: 0 auto;
	padding-top: 20px;
}
	
.promo-col {
	display: inline-block;
	background-color: #fff;
	text-align: center;
	width: 255px;
	margin:0 auto;
	padding-top: 20px;
}	
	
#coffee {
	float: left;
	width: 255px;
	background: #fff;
	background-image: url("http://melonysmith.github.io/dws/DWS1-Practical/images/ico_coffee.png");
	background-position: center top; 
	line-height: 25px;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 10px;
    padding-right: 30px;
    float: left;
}			
	
#music {
	float: left;
	width: 255px;
	background: #fff;
	line-height: 25px;
	background-image: url("http://melonysmith.github.io/dws/DWS1-Practical/images/ico_music.png");
	background-position: center top; 
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 10px;
    padding-right: 30px;
    float: left;  
}		

#food {
	float: left;
	width: 255px;
	background: #fff;
	line-height: 25px;
	background-image: url("http://melonysmith.github.io/dws/DWS1-Practical/images/ico_food.png");
	background-position: center top; 
    background-repeat: no-repeat;
    text-align: center;
    padding-right: 30px;
    float: left;
}

#service {
	float: left;
	width: 255px;
	background: #fff;
	line-height: 25px;
	background-image: url("http://melonysmith.github.io/dws/DWS1-Practical/images/ico_service.png");
	background-position: center top; 
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 10px;
    padding-right: 30px;
    float: left;
    clear: both;
}

.clear {
	clear: both;
}

＆＃13;

<!-- begin promo -->
		<section id="promo">
	
			<div id="promo-first-col" class="promo-col">

				 <h3 id="coffee">Imported Coffee</h3>

				 <p>Checkout our various tyes of imported coffee.</p> 				

			</div>

			<div class="promo-col">

				 <h3 id="music">Great Music</h3> 

				 <p>Our DJs will entertain you like never before.</p> 				

			</div>

			<div class="promo-col">

				 <h3 id="food">Finest Cuisine</h3>

				 <p>From Italian to Tex-Mex, you will find all types of food</p>				

			</div>

			<div class="promo-col">

				 <h3 id="service">Nice Staff</h3>

				 <p>You will never forget our smile and professional attitude.</p>				

			</div>

		</section>
		<!-- end promo -->

＆＃13;

Answer 1

创建两个容器div：一个包含coffee div和cuisine div，另一个包含另外两个div。将容器设置在左侧

float: left;

和另一个

float: right;

现在有几种方法可以解决这个问题。一种方法是将两个容器设置为

width: 50%

以及每个列/容器中包含的两个div

text-align: center;

OR

你可以简单地给它们浮动属性，然后在左边设置margin-left，在右边设置margin-right，然后稍微调整边距，直到你得到它们为止。

希望有所帮助！

CSS;图像和文字，浮动

1 个答案: