Question

我正在尝试做两件事： 1）使三张图片并排浮动 2）在每张图片下方的p元素中创建一个填充文本的边框。

以下是我想要实现的目标。

这是我到目前为止所做的......

＆＃13;

<div class="fitness-section">
		<h1>Get fit</h1>
		<img src="images/EssentialWorkouts.png" alt="essentialworkouts" class="essential">
		<h5>Essential Workouts</h5>
		<p>Going to a gym is definitely the best way to transform and build your body.
		   However, It is common for many people especially new-gymmers to feel nervous,
		   intimidated and lost in the gym. There are many effective and essential
		   workouts that are bound to get you ripped and buff in no time!</p>
		<a href="" class="button">Find out more</a>
	
	</div>
	
	<div class="fitness-section">
		
		<img src="images/Motivation.png" alt="motivation" class="motivation">
		<p>Have you ever felt unmotivated and lost your will to gym? Fret not, there are 
           many inspirational quotes and articles here that will help you generate and 
           maintain a flow of positive attitude to keep you motivated to achieve your
           fitness and goals in life!</p>
        <a href="" class="button">Find out more</a>
	</div>
	
	<div class="fitness-section">
		<h1>Get fit</h1>
		<img src="images/Shoe.png" alt="shoe" class="shoe">
		<p>Working out in the gym with a proper attire is an absolute neccessity to achieve
		   the best workout possible. Wearing attire that is too tight or too loose will 
		   definitely affect your workouts. Discover and find out what you should and 
		   should not be wearing in the gym.</p>
		<a href="" class="button">Find out more</a>
	</div>

＆＃13;

Answer 1

这里有一些工作要启动你。

html, body {
  box-sizing: border-box;
}

h1 {
  text-align: center;
}

.wrapper {
  text-align: center;
}

p {
  text-align: left;
  margin-top: 20px;
  border: 1px solid #000;
  padding: 10px;
  height: 150px;
}

.fitness-section {
  display: inline-block;
  vertical-align: top;
  padding: 10px;
  margin-right: -4px;
  width: 300px;
}

https://codepen.io/anon/pen/MvyeEN

Answer 2

我可以推荐你，为你的盒子使用不同的课程

<div class="fitness-section div1">
    <h1>Get fit</h1>
    <img src="images/EssentialWorkouts.png" alt="essentialworkouts" class="essential">
    <h5>Essential Workouts</h5>
    <p>Going to a gym is definitely the best way to transform and build your body.
       However, It is common for many people especially new-gymmers to feel nervous,
       intimidated and lost in the gym. There are many effective and essential
       workouts that are bound to get you ripped and buff in no time!</p>
    <a href="" class="button">Find out more</a>
 </div>

 <div class="fitness-section div2">
     <img src="images/Motivation.png" alt="motivation" class="motivation">
     <p>Have you ever felt unmotivated and lost your will to gym? Fret not, there are 
        many inspirational quotes and articles here that will help you generate and 
        maintain a flow of positive attitude to keep you motivated to achieve your
        fitness and goals in life!</p>
     <a href="" class="button">Find out more</a>
</div>

<div class="fitness-section div2">
    <h1>Get fit</h1>
    <img src="images/Shoe.png" alt="shoe" class="shoe">
    <p>Working out in the gym with a proper attire is an absolute neccessity to achieve
       the best workout possible. Wearing attire that is too tight or too loose will 
       definitely affect your workouts. Discover and find out what you should and 
       should not be wearing in the gym.</p>
    <a href="" class="button">Find out more</a>
</div>

对于风格使用这个：

.fitness-section {
    width: 30%;
}

.div1 {
    float: left;
    background-color: red;
    margin: 15px 15px;
}

.div2 {
    float: left;
    background-color: blue;
    margin: 15px 15px;

}

div3 {
    float: right;
    background-color:yellow;
    margin: 15px 15px;
}

如何将文字并排浮动图片

2 个答案: