如何实现图片在文本下方横向并排布局？

Let's tackle why your images are stacking vertically in the left split section and get them side-by-side as you want. Here are the key issues in your current code and how to fix them:

Key Problems in Your Current Setup #

• Missing CSS for .row and .column: You’ve used these classes in your HTML but haven’t defined any styles for them, so the browser doesn’t know to arrange the columns horizontally.
• Invalid inline style on images: Your first image has a syntax error in the style attribute (style="width:40%" "height: 20%"), which breaks the height setting.
• Absolute positioning affecting flow: The .centered div uses position: absolute, which takes it out of the normal document flow. This can cause the following .row to misalign or overlap if not accounted for.
• Other minor typos: A few syntax errors (like button: instead of .button) and missing units (like font-size: 30; instead of font-size: 30px;) are causing unintended layout glitches.

Step-by-Step Fixes #

1. Add CSS for Row/Column Horizontal Layout #

Add these styles to your CSS to make the images flex side-by-side:

/* Style the row container to use flexbox for horizontal alignment */
.row {
  display: flex;
  justify-content: center; /* Center images horizontally */
  gap: 20px; /* Add space between images */
  margin-top: 250px; /* Push row below the centered text */
}

.column {
  flex: 0 0 auto; /* Prevent columns from stretching/shrinking */
}

2. Fix Image Inline Style Error #

Correct the broken style attribute on your first image:

<img src="Demotech.jpg" alt="rating" style="width:40%; height:20%">

3. Adjust Centered Text Position #

Tweak the .centered class to ensure it doesn’t block the image row:

.centered {
  position: absolute;
  top: 20%; /* Adjust to leave space for the image row below */
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%; /* Ensure text doesn’t overflow the split section */
}

4. Clean Up Other CSS Typos #

Fix these small issues to avoid further problems:

p {
  font-size: 30px; /* Added missing px unit */
}

.button { /* Fixed syntax error (removed colon) */
  position: relative;
  left: 140px;
}

Modified Full Code #

Updated CSS #

body { margin: 0; padding: 0; font-family: "Open+Sans", sans-serif; }
.navbar { border-bottom: 2px solid #0C133C; }
#nav { background-color: #fff; color: white; width: 100%; }
.nav { float: right; text-align: left; margin: 0; }
.nav>li { display: inline-block; padding: 20px 50px 10px 9px; } /* Fixed capitalization of Inline-block */
.nav>li a { text-decoration: none; color: #0C133C; font-size: 18px; border-bottom: 3px solid transparent; }
.clearer { clear: both; }
.subnav class { margin: 0; position: relative; }
.subnav>div a { text-decoration: none; color: #0C133C; font-size: 18px; padding: 20px 30px 10px 9px; }
.logo { margin-top: 1rem; }
.subnav { display: flex; justify-content: space-between; align-items: center; margin-right: 1rem; }
.split { height: 70%; width: 50%; position: fixed; z-index: 1; top: 0; /* Fixed top: -50 which pushed content off-screen */ overflow-x: hidden; padding-top: 20px; }
.centered{ position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; }
.left { left: 0; background-color: #282C41; color: white; margin-top: .5rem; }
h1 { line-height: 1.2; font-size: 40px; bottom: 20px; }
p { font-size: 30px; }
.right { right: 0; background-color: #CDCDCD; margin-top: .5rem; font-size: 18px; }
input[type=text], select { position: relative; left: 140px; width: 50%; padding: 12px 20px; margin: 3px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.button { position: relative; left: 140px; }

/* New styles for image row layout */
.row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 250px;
}

.column {
  flex: 0 0 auto;
}

Updated HTML #

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<div class="subnav subnav-light bg-light"> <!-- Changed <subnav> to <div> (invalid HTML tag) -->
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav-brand" href="#"> <!-- Fixed subnav=brand typo -->
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</div>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes. </p>
</div>
<div class="row">
<div class="column">
<img src="Demotech.jpg" alt="rating" style="width:40%; height:20%">
</div>
<div class="column">
<img src="USTreasury.jpg" alt="treas" style="width:40%">
</div>
</div>
</div>
<div class="split right">
<form name="form1" id="form1" action="/action_page.php">
<select name="subject" id="subject">
<option value="" selected="selected">Select Your State</option>
<option value="California">California</option>
<option value="Illinois">Illinois</option>
<option value="Michigan">Michigan</option>
<option value="Ohio">Ohio</option>
</select>
<br><br>
<select name="topic" id="topic">
<option value="" selected="selected">Who is requring the bond</option>
</select>
<br><br>
<select name="chapter" id="chapter">
<option value="" selected="selected">What jurisdiction is requring the bond</option>
</select>
<br><br>
<select name="chapter" id="chapter">
<option value="" selected="selected">Select Your Bond</option>
</select>
<br><br>
</form>
<form action="/action_page.php">
<input type="text" id="date" name="startdate" placeholder="Effective Start Date">
<br><br>
<input type="text" id="email" name="typeemail" placeholder=" Type E-mail">
</form>
<button type="button" class="button">Click Me!</button> <!-- Added .button class -->
</div>
</body>
</html>

Additional Notes #

I also fixed a few other small issues: changed the invalid <subnav> tag to <div>, corrected the subnav=brand typo, and fixed top: -50 on .split (which was pushing content off the top of the screen).

These changes should make your images appear side-by-side below the text in the left split section as intended.

内容的提问来源于stack exchange，提问作者nmart