<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text.html" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website</title>
<style>
body {
margin: 0;
}
#container {
width: 100%;
}
#headerBg {
width: 100%;
background-color: #ffffff;
}
#interior {
width: 100%;
margin: 0 auto;
}
#header {
width: 100%;
height: 85px;
}
#logo {
width: 200px;
height: 45px;
float: left;
display: inline-block;
margin-left: 40px;
margin-top: 40px;
}
#topNav {
width: 600px;
float: right !important;
color: #000000;
margin-right: 40px;
}
.topNavFont {
font-size:18px;
float: right;
font-family:sans-serif;
}
.social_youtube {
margin-right: 10px;
}
.social_facebook {
margin-right: 10px;
}
.social_twitter {
margin-right: 10px;
}
.searchbar {
width: 150px;
height: 30px;
margin-right: 40px;
font-size: 16px;
}
.button {
width: 130px;
height: 36px;
margin-right: 40px;
}
#bottomNav {
width: 870px;
float: right !important;
color: #000000;
margin-right: 40px;
margin-top: 10px;
}
.bottomNavFont {
font-size:1em;
color:#222;
float: right;
font-family:sans-serif;
}
.bottombutton {
width: 130px;
height: 35px;
}
#row {
margin-top: 30px;
}
img.team {
width: 1355px;
height: 650px;
margin-left: 45px;
margin-top: 5px;
}
img.leftarrow {
float: left;
width: 50px;
height: 50px;
margin-left: 40px;
margin-top: 55px;
}
div.pic {
width: 1450px;
}
img.lake {
margin-left: 30px;
}
img.battersea {
margin-left: 25px;
}
p.location {
display: inline-block;
margin-top: 5px;
margin-left: 20px;
padding-right: 100px;
}
p.battersea {
margin-left: 150px;
}
img.rightarrow {
width: 50px;
height: 50px;
margin-left: 15px;
margin-bottom: 70px;
}
#rows {
margin-top: 30px;
width: 1450px;
}
p.subtext {
display: inline-block;
width: 340px;
padding-right: 30px;
padding-left: 30px;
text-align: center;
margin-left: 20px;
margin-top: 5px;
}
p.juniors {
margin-left: 110px;
}
img.youth {
margin-left: 120px;
width: 383px;
}
img.regatta {
margin-left: 30px;
width: 383px;
}
img.rowathon {
margin-left: 32px;
width: 383px;
}
#story {
float: right;
width: 340px;
height: 300px;
margin-right: 150px;
margin-top: 50px;
}
#storytext {
margin-left: 115px;
margin-top: 50px;
height: 330px;
width: 1000px;
}
p.subheading {
width: 590px;
font-size: 19px;
font-weight: 600;
}
p.copy {
width: 790px;
height: 230px;
}
#footer {
margin-top: 70px;
height: 140px;
background-color: #0645be;
color: white;
font-size: 20px;
}
#leftside {
float: left;
margin-left: 45px;
text-align: left;
}
#rightside {
float: right;
margin-right: 35px;
text-align: right;
}
</style>
</head>
<body>
<div id="container">
<div id="headerBg">
<div id="interior">
<div id="header">
<div id="logo">
<img src="https://www.britishrowing.org/wp-content/themes/britishrowing/assets/img/brand/br-logo-horizontal.png" height="45" alt="logo">
</div>
<div id="topNav">
<img class="topNavFont social social_instagram" src="https://instagram-brand.com/wp-content/uploads/2016/11/Instagram_AppIcon_Aug2017.png?w=300" alt="instagram logo" width="37" height="36">
<img class="topNavFont social social_youtube" src="http://pluspng.com/img-png/youtube-png-youtube-play-button-png-free-download-396.png" alt="youtube logo" width="40" height="35">
<img class="topNavFont social social_facebook" src="https://s18955.pcdn.co/wp-content/uploads/2017/11/Facebook-share-icon.png" alt="facebook logo" width="37" height="35">
<img class="topNavFont social social_twitter" src="http://stagewp.sharethis.com/wp-content/uploads/2019/03/twitterimg.png" alt="twitter logo" width="37" height="35">
<form class="topNavFont"><input class="searchbar" value="Search..."></form>
<button class="topNavFont button">SIGN IN</button>
</div>
<div id="bottomNav">
<button class="bottomNavFont bottombutton shop">SHOP</button>
<button class="bottomNavFont bottombutton events">EVENTS</button>
<button class="bottomNavFont bottombutton news">NEWS</button>
<button class="bottomNavFont bottombutton go">GO ROWING</button>
<button class="bottomNavFont bottombutton about">ABOUT US</button>
<button class="bottomNavFont bottombutton home">HOME</button>
</div>
</div> <!-- closing header tag here -->
<!---------------------------->
<!-- end header code here ---->
<!---------------------------->
<div id="content">
<img class="team" src="https://www.britishrowing.org/wp-content/uploads/2017/02/Paralympics_11_09_16_1235-e1486995505416.jpg" width="1340" height="570">
</div>
<div id="row">
<img class="leftarrow" src="https://image.flaticon.com/icons/png/512/21/21256.png" width="50" height="50">
<div class="pic">
<img class="lake battersea" src="https://media.timeout.com/images/102759833/630/472/image.jpg" width="175" height="170" alt="Battersea Park">
<img class="lake" src="https://leytonstonelondone11.files.wordpress.com/2011/10/hollow-pond-boats.jpg" width="175" height="170" alt="Hollow Pond">
<img class="lake" src="https://media-cdn.tripadvisor.com/media/photo-s/04/0d/dc/b6/boating-pond.jpg" width="175" height="170" alt="Dulwich Park">
<img class="lake" src="http://www.utrc.org.uk/wp-content/uploads/2014/01/MensEight2012-for-ROWING-SQUADS-ABOUT.jpg" width="175" height="170" alt="Upper Thames">
<img class="lake" src="https://upload.wikimedia.org/wikipedia/commons/9/99/Regent%27s_Park_boating_lake_-_geograph.org.uk_-_21750.jpg" width="175" height="170" alt="Regents Park">
<img class="lake" src="https://i.pinimg.com/originals/57/63/cc/5763cc9831846834b8af799f748841c3.jpg" width="175" height="170" alt="Hyde Park">
<img class="rightarrow" src="https://image.flaticon.com/icons/png/512/20/20659.png" width="50" height="50">
<br>
<p class="location battersea">Battersea Park</p>
<p class="location hollow">Hollow Pond</p>
<p class="location dulwich">Dulwich Park</p>
<p class="location upper">Upper Thames</p>
<p class="location regents">Regents Park</p>
<p class="location hyde">Hyde Park</p>
</div>
</div>
<div id="rows">
<img class="youth" src="https://www.britishrowing.org/wp-content/uploads/2019/12/9-FRBC.png" alt="Youth Rowing Project" width="383">
<img class="regatta" src="https://www.britishrowing.org/wp-content/uploads/2019/07/England-Junior-Women-HIR2019.jpg" alt="International Womens Regatta" width="383">
<img class="rowathon" src="https://www.britishrowing.org/wp-content/uploads/2019/11/Ian-Jamieson-1600x900.jpg" alt="Charity Rowathon" width="383">
<br>
<p class="subtext juniors">Community-Focused Clubs Enables More Juniors to Reap the Benefits of Rowing</p>
<p class="subtext">Transformed Regatta Allows Cutting Edge International Rowing Competition</p>
<p class="subtext">Community-Focused Clubs Enables More Juniors to Reap the Benefits of Rowing</p>
</div>
<div id="story">
<img src="https://www.britishrowing.org/wp-content/uploads/2019/12/Shelagh-Allen.jpg" alt="Mary" width="375" height="300">
</div>
<div id="storytext">
<p class="subheading">Success for the older generation groups at the Mizuno British Indoor Rowing Championships</p>
<p class="copy">
Another keep fit enthusiast, who set herself the challenge of racing over 2000m, was Shelagh Allen. The 81-year-old, from West Byfleet in Surrey, was the oldest woman taking part in the Championships and the only competitor in the women’s 80-84 age group.
The former nurse, who finished in 10.42, took up indoor rowing at 58 and has since competed in many events, including the World Indoor Rowing Championships, and has held several British records.
She said: “I used to cycle but then tried indoor rowing and loved it.
I used to go five days a week but now go about three.
As long as I keep going I will keep doing it.
So many people say they are proud of me, which is great.”<br><br>
Her next major event will be the World Rowing Indoor Championships in Paris in February.<br>
In the meantime, the mother-of-two and grandmother-of-one will continue to go to the gym and power walk for an hour every morning with her husband Tom, 85.
The sprightly seniors impressed GB’s top para-rowers, who were also competing at the indoor championships, as part of the selection process for the Paralympics in Tokyo next year.
</p>
</div>
<div id="footer">
<div id="leftside">
<p>British Rowing, 6 Lower Mall, Hammersmith, London, W6 9DJ</p>
<p>Telephone: 020 8237 6700</p>
<p>Fax: 020 8237 6749</p>
</div>
<div id="rightside">
<p>Accessibility Statement</p>
<p>Privacy Policy and Cookies Policy</p>
<p>© Copyright 2019 British Rowing</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
正如您所看到的，页眉节，故事节和页脚节都中断了。
中间的主要内容似乎已经拉长了，所以我不确定如何解决这个问题。我尝试减小图像的宽度，以查看是否可以解决问题，但是，当我退出“检查代码”时，它会使图像的宽度“变小”，并且不适合其余内容页面。
这是网站其他部分中断之后的第四次尝试。
答案 0 :(得分：0)
我认为您应该使用css网格或flex box来减小#row和images等部分的大小，并使用百分比（％）作为属性值