如何为网站的主要部分提供 2 列布局以使其看起来不错？
Posted
技术标签:
【中文标题】如何为网站的主要部分提供 2 列布局以使其看起来不错？【英文标题】：How do I give the main section of my site a 2 column layout so that it looks good? 【发布时间】：2021-11-04 12:19:51 【问题描述】：下面我将添加我的 html 和 CSS 代码。我想在主要部分中为我的页面提供 2 列布局。任何帮助深表感谢。导航、页脚和标题部分在每一页上都是相同的。我只需要主要部分的两列。
HTML
<!DOCTYPE html>
<head>
<title>Augie's Custom T-shirts</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<nav class="nav">
<div class="menu">
<p>Home</p>
</div>
<div class="menu">
<p>Shop</p>
</div>
<div class="menu">
<p>Events</p>
</div>
<div class="menu">
<p>Contact Us</p>
</div>
<br/>
<br/>
</nav>
<main class="wrapper">
<div class="banner">
<h1><span class="name">Augie's Custom T-shirts</span></h1>
<h2>Custom T-shirts for you or your party.</h2>
<div class="bulletPoints">
<ul>
<li>Birthday parties</li>
<li>Vacation groups</li>
<li>Bachelorette Parties</li>
<li>Family reunions</li>
<li>Work team rewards</li>
<li>Business promotions</li>
</ul>
</div>
<br/>
</div>
<p id="Catch">
Do you have an event coming up, and want everyone to get in the spirit? T-shirts can bring a group together, make everyone feel connected, and let everyone know what you're celebrating.
</p>
<p>T-shirts can also be a great gift to someone that acknowledges their special interest or hobby.</p>
<p>Choose from one of our unique designs, or let us put your own design on a shirt for you.</p>
<div class="row">
<div class="column">
<img src="images/gorilla.jpg" style="width:100%">
</div>
<div class="column">
<img src="images/pink.jpg" style="width:100%">
</div>
<div class="column">
<img src="images/skull.jpg" style="width:100%">
</div>
</div>
<p><strong>How it works:</strong></p>
<p>Browse our selection of unique designs, select the size and colors of the shirts you would like, and place your order. We will ship your shirts within three business days for in-stock shirts, or five days for custom size and colors.</p>
<figure>
<img src="images/t-shirt-colors.jpeg" class="image1">
<figcaption>Choose from are variety of t-shirt colors!</figcaption>
</figure>
<p>Have a design of your own? Can't find the right sentiment? Call or email us to discuss the possibilities or get some ideas for your event.</p>
<p>Please note there will be a one time $15 charge for any custom graphics design.</p>
<h2><em>Contact us today!</em></h2>
</main>
<footer class="footer">
<div class="box">
<p>Augie's Custom T-shirts</p>
<p>(478) 555-1212</p>
<p>augieB@augiesTees.com</p>
<br/>
</div>
<div class="box">
<p>Check out are Social Media for updates!</p>
<p>Facebook:</p>
<p>Instagram:</p>
<p>Twitter:</p>
</div>
<div class="box">
<p>Locations:</p>
<br/>
<p>100 Tanger Dr, Locust Grove, GA</p>
<p>2954 Watson Blvd Suite 100, Warner Robins, GA</p>
</div>
</footer>
<div class="copyright">
<h3> @copyright: Landon Byrd</h3>
<p>Fall 2021, All Rights Reserved</p>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
/>
</a>
</p>
</body>
CSS
/*
Landon Byrd
Fall 2021
Plain Red #f60d41
Rich Red #f6130d
Orioles Orange #f64d0d
Sunset Orange #f6870d
Golden Yellow #f6c10d
*/
/* Global settings */
h1 text-align: center; font-family: Papyrus
h2 text-align: center; color: #f6130d; text-decoration: underline
.wrapperwidth:85%; margin:0 auto; max-width: 960px;
/* Nav Section */
.navwidth: 85%; margin:0 auto; background-color: #f6130d; text-align: center;
.menufloat:left; width: 25%
/* Main section */
.bannerjustify-content: center; background-color: #f6c10d; text-align: center;
.bulletPoints ul
display:inline-block;
text-align:left;
sectionbackground-color: #f6870d; color: #f60d41; font-style:italic; margin: 25px 50px 75px;
body
background-image: url("images/background.jpeg");
.image1
display: block;
margin-left: auto;
margin-right: auto;
figcaption
text-align: center;
.row
display: flex;
.column
flex: 33.33%;
padding: 5px;
/* Footer section */
* box-sizing: border-box;
.footertext-align: center; background-color: #f6130d; color: #f6c10d;
.boxfloat:left; width: 33.33%
.footer::after content: ""; clear:both;
/* Copyright section */
.copyright text-align: center; background-color: #f6130d; color: #f6c10d;
我还想确保我所有的花车都被清除为 nessicary。
【问题讨论】：
【参考方案1】：使用 flex 非常简单。
2021年你应该尽量避免花车。
只需按照此处所述切换到 flex：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
至于你的具体情况：
.flex-container
display:flex;
width:100%;
.col
max-width:50%;
flex: 0 0 50%;
<div class="flex-container">
<div class="col">
col 1
</div>
<div class="col">
col 2
</div>
</div>如果你想让它们在移动设备上垂直移动，只需给容器属性 flex-direction:column 并设置 2 个 div max-width:100% 和 flex:0 0 100%;
【讨论】：
以上是关于如何为网站的主要部分提供 2 列布局以使其看起来不错？的主要内容，如果未能解决你的问题，请参考以下文章
如何为视图提供固定位置，使其不受 SwiftUI 中滚动的影响