如何对齐页脚中的文本框和按钮？
How to align textbox and button in footer?
目前卡在如何将文本框和按钮以 50% 宽度（在页脚中）对齐在同一行上，谁能给我一些帮助或指导，或者能够为我解决这个问题？
[额外的问题，任何进一步的支持或指导将不胜感激，为基本想法提供线框]
一个是如何在导航栏下方对齐的文本和图片之间放置间距。
下面是如何为每个单独的图片和文本框设置细边框。
（对不起，如果我不能问额外的问题）
您需要将按钮从它自己的 div 块元素中删除，并与输入内联。我已将 .container div 设置为 50% 并将输入和按钮居中对齐。要在图像和文本之间添加 space，只需在右侧和底部留出空白。您可以简单地向您的 .column class 添加一个边框属性以提供细边框：
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#holidayImg {
margin: 0px 20px 20px 0px;
}
.paragraph {
padding: 5px;
}
{
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
border: solid 1px #ccc;
margin: 0px 5px;
border-radius 4px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
.container {
display: flex;
}
input[type=text] {
padding: 15px;
margin: 5px;
display: inline-block;
border: none;
background: #f1f1f1;
width: 50%;
}
.signupbtn {
width: 50%;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li><a href="index.html">Find out more</a></li>
<li><a href="index.html">Credits</a></li>
<li><a href="Wireframe.html">Wireframe</a></li>
<li><a href="index.html">Admin</a></li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left" id="holidayImg">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</form>
</body>
</html>
如果我明白你在问什么，你可以添加另一个 class 如下：
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required class="side-by-side">
<div class="clearfix side-by-side">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
// CSS added to get effect
.container {
width: 100%;
float: right;
}
.side-by-side {
display: inline;
}
这样它就停留在 1 行上，并且与您的线框类似，保持在右侧。
您可以使用 css flexbox 来实现
"align the textbox and button on the same line with 50% width"
部分具体添加
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
到您的 css 文件。我在下面包含了修改后的项目，以便您可以检查效果。更多关于 CSS flexbox 的信息请见 here.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.paragraph {
padding: 5px;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
input[type=text] {
width: 50%;
padding: 15px;
margin: 5px 0 5px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li><a href="index.html">Find out more</a></li>
<li><a href="index.html">Credits</a></li>
<li><a href="Wireframe.html">Wireframe</a></li>
<li><a href="index.html">Admin</a></li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<div class="clearfix">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
</form>
</body>
</html>
在图像和文本之间添加 space，您可以简单地为图像应用边距或填充。这样的事情会做：
.desired-img {
margin: 5px;
}
要为段落添加边框，只需使用 css 设置边框样式。这样的事情就可以完成工作：
.column {
border: 1px solid lightgrey;
}
希望对您有所帮助！
目前卡在如何将文本框和按钮以 50% 宽度（在页脚中）对齐在同一行上，谁能给我一些帮助或指导，或者能够为我解决这个问题？
[额外的问题，任何进一步的支持或指导将不胜感激，为基本想法提供线框]
一个是如何在导航栏下方对齐的文本和图片之间放置间距。
下面是如何为每个单独的图片和文本框设置细边框。
（对不起，如果我不能问额外的问题）
您需要将按钮从它自己的 div 块元素中删除，并与输入内联。我已将 .container div 设置为 50% 并将输入和按钮居中对齐。要在图像和文本之间添加 space，只需在右侧和底部留出空白。您可以简单地向您的 .column class 添加一个边框属性以提供细边框：
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#holidayImg {
margin: 0px 20px 20px 0px;
}
.paragraph {
padding: 5px;
}
{
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
border: solid 1px #ccc;
margin: 0px 5px;
border-radius 4px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
.container {
display: flex;
}
input[type=text] {
padding: 15px;
margin: 5px;
display: inline-block;
border: none;
background: #f1f1f1;
width: 50%;
}
.signupbtn {
width: 50%;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li><a href="index.html">Find out more</a></li>
<li><a href="index.html">Credits</a></li>
<li><a href="Wireframe.html">Wireframe</a></li>
<li><a href="index.html">Admin</a></li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left" id="holidayImg">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</form>
</body>
</html>
如果我明白你在问什么，你可以添加另一个 class 如下：
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required class="side-by-side">
<div class="clearfix side-by-side">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
// CSS added to get effect
.container {
width: 100%;
float: right;
}
.side-by-side {
display: inline;
}
这样它就停留在 1 行上，并且与您的线框类似，保持在右侧。
您可以使用 css flexbox 来实现
"align the textbox and button on the same line with 50% width"
部分具体添加
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
到您的 css 文件。我在下面包含了修改后的项目，以便您可以检查效果。更多关于 CSS flexbox 的信息请见 here.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.paragraph {
padding: 5px;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
input[type=text] {
width: 50%;
padding: 15px;
margin: 5px 0 5px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li><a href="index.html">Find out more</a></li>
<li><a href="index.html">Credits</a></li>
<li><a href="Wireframe.html">Wireframe</a></li>
<li><a href="index.html">Admin</a></li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<div class="clearfix">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
</form>
</body>
</html>
在图像和文本之间添加 space，您可以简单地为图像应用边距或填充。这样的事情会做：
.desired-img {
margin: 5px;
}
要为段落添加边框，只需使用 css 设置边框样式。这样的事情就可以完成工作：
.column {
border: 1px solid lightgrey;
}
希望对您有所帮助！