Html CSS问题：如何对齐<；部门>；元素（<；div>；、页眉、页脚和正文）与响应性网页设计垂直？
我试图在一列中垂直对齐页眉、正文、页脚和div，以使web设计具有响应性（在不同的屏幕大小上看起来很好）：ConfluenceInfinite.org或参阅下面的dev子域 对于不熟悉Html CSS问题：如何对齐<；部门>；元素（<；div>；、页眉、页脚和正文）与响应性网页设计垂直？,html,css,responsive-design,alignment,vertical-alignment,Html,Css,Responsive Design,Alignment,Vertical Alignment,我试图在一列中垂直对齐页眉、正文、页脚和div，以使web设计具有响应性（在不同的屏幕大小上看起来很好）：ConfluenceInfinite.org或参阅下面的dev子域 对于不熟悉html和css（像我一样）的人来说，这是一个纯css/html实现/标记，包括菜单 您可以访问我的开发子域，直接查看问题： 我对此做了很多研究。以下是一些研究： 我不相信这个问题/答案适用于我的问题，因为我的问题是垂直对齐（如果我错了，请纠正我）。它使用固定的px值，这对手机不起作用，我尝试了display
htmlcsscsshtmlpxdisplay:inline blockhtml<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="icon" type="/images/png" href="/images/CII - favicon for website - 2020-09-17 0435.png" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="/StylePage.css" />
<link rel="stylesheet" href="/StyleMenu.css" />
<title>CII - Optimizing change for the benefit of all.</title>
</head>
<body>
<header>
<!-- start ============================================================================ menu (goes in header) ============================== start -->
<div class="menu-wrap">
<input type="checkbox" class="toggler" />
<div class="hamburger">
<div class="ClassForTidy"></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li>
<a href="Index.html">Home</a>
</li>
<li>
<a href="Team.html">Team</a>
</li>
<li>
<a href="AboutUs.html">About Us</a>
</li>
<li>
<a href="Definitions.html">Definitions</a>
</li>
<li>
<a href="HaveDoubts.html">Have Doubts?</a>
</li>
<li>
<a href="ContactUs.html">Contact Us</a>
</li>
<li>
<a href="DonateToday.html">Donate Today</a>
</li>
<li>
<a href="GetInvolved.html">Get Involved</a>
</li>
<li>
<a href="TheMovement.html">The Movement</a>
</li>
<li>
<a href="c11.html">c11</a>
</li>
<li>
<a href="TheCeosStory.html">The CEO's Story</a>
</li>
<li>
<a href="News.html">News</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- end ============================================================================ menu (goes in header) ============================== end -->
<!-- start ============================================================================ header text ============================== start -->
<p id="HeaderText">-------------------- SITE UNDER CONSTRUCTION -------------------- this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue</p>
<!-- end ============================================================================ header text ============================== end -->
</header>
<div class="site-wrap">
<!-- start ============================================================================ logo region ============================== start -->
<figure class="fig_logo_reg">
<img src="/images/CII_Logo.PNG" class="img_logo_reg" />
</figure>
<!-- end ============================================================================ logo region ============================== end -->
<!-- start ============================================================================ start page content ============================== start -->
<!-- start ============================================================================ paste content below ============================== start -->
<div class="container showcase-inner">
<br />
<br />
<h1 style="font-size:30px; color: black; padding: 10px 0 0 0; margin: 30px 0; line-height: 30px;">Why doesn't the system favor "the good guy"? Let's rig the system in your
favor.</h1>
<h1 style="font-size:30px; color: black; padding: 10px 0 0 0; margin: 30px 0; line-height: 30px;">We know how to fund the "unicorn" and tame the "machine" whilst compelling
people to change how they think, work, and have fun so it benefits good people, without breaking any laws. Truly.</h1>
<br />
<p>The world is focused on money, getting people’s attention, and offering goods and service at an equilibrium price
where both the lowest financial cost and highest financial gain are at. CII is focused on destroying this “machine”
and system of values in a legal, ethical, and morally sound way. CII has created technology that will facilitate,
perpetuate, and maintain the new system by optimizing change for the benefit of all that will connect good people,
produce optimal “humanitarian value” output, and simultaneously destroy the old system over time. CII will facilitate
this with the help of good people in a way that will protect individuals and their livelihood achieving a better system
for society.</p>
<a href="AboutUs.html" class="btn">Read More this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue</a>
</div>
<!-- end ============================================================================ paste content above ============================== end -->
</div>
<!-- start =============================================================== footer ============================================= end -->
<footer>
<div class="navLeftFooter nav-globe" id="navFooter">
<a href="#top" id="navBackToTop">
<div class="navFooterBackToTop">
<span class="navFooterBackToTopText">Go Back to Top of Page - this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue</span>
</div>
</a>
<div class="navFooterVerticalColumn navAccessibility" role="presentation">
<div class="navFooterVerticalRow navAccessibility" style="display: table-row;">
<div class="navFooterLinkCol navAccessibility">
<div class="navFooterColHead">Get to Know Us</div>
<ul>
<li class="nav_first">
<a href="GetInvolved.html" class="nav_a">Careers & Volunteer</a>
</li>
<li>
<a href="TheCeosStory.html" class="nav_a">Blog</a>
</li>
<li>
<a href="AboutUs.html" class="nav_a">About CII</a>
</li>
<li>
<a href="AboutUs.html#TargetSusCsr" class="nav_a">Sustainability</a>
</li>
<li>
<a href="News.html" class="nav_a">News & Press Center</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Donor Relations</a>
</li>
</ul>
</div>
<div class="navFooterColSpacerInner navAccessibility"></div>
<div class="navFooterLinkCol navAccessibility">
<div class="navFooterColHead">Get Involved with CII's Platform</div>
<ul>
<li class="nav_first">
<a href="ContactUs.html" class="nav_a">Become an Affiliate</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Become a Strategic Partner</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Offer Your Product or Service/"Advertise"</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Submit an Ideology for Consideration</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Submit an Idea for Consideration</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Submit a Core Value for Consideration</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Submit a Concept for Consideration</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Submit a Core Change for Consideration</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Submit Anything Else</a>
</li>
</ul>
</div>
<div class="navFooterColSpacerInner navAccessibility"></div>
<div class="navFooterLinkCol navAccessibility">
<div class="navFooterColHead">Connect with People</div>
<ul>
<li class="nav_first">
<a href="TheMovement.html" class="nav_a">The Movement</a>
</li>
<li>
<a href="c11.html" class="nav_a">c11</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">CII</a>
</li>
</ul>
</div>
<div class="navFooterColSpacerInner navAccessibility"></div>
<div class="navFooterLinkCol navAccessibility">
<div class="navFooterColHead">Help People</div>
<ul>
<li class="nav_first">
<a href="c11.html" class="nav_a">c11 - this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Report Something</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Pay Something Forward</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Report a "Do-gooder"</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output Organization</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output Business</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output nonprofit</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output Government/Country</a>
</li>
<li class="nav_last">
<a href="ContactUs.html" class="nav_a">Help</a>
</li>
</ul>
</div>
</div>
</div>
<div class="nav-footer-line"></div>
<div class="navFooterLine navFooterLinkLine navFooterPadItemLine">
<div class="navFooterLine navFooterLogoLine">
<figure id="FigLogoTiny">
<img src="/images/CII%20-%20favicon%20for%20website%20-%202020-09-17%200435.png" />
</figure>
</div>
<div class="navFooterLine"></div>
</div>
</div>
</footer>
<!-- end ============================================================================ footer ============================== end -->
</body>
</html>
导入导入css
包括在内。尽量使问题有条理、简短
我将关注这个问题，看看是否有人需要进一步的回答或提供任何帮助。如有需要，我会尽快修改问题。谢谢
PS-如果可能的话，我正在尝试使解决方案/我的网站能够在所有浏览器和所有屏幕大小下工作，而无需任何脚本
PSS-在计算机上，你必须缩小窗口才能看到问题…这就是我在上面的计算机屏幕截图中所做的，以说明问题
编辑-1：我还应该声明，页脚最好的响应性/动态性/移动性/等等是在其他div
列的下方滑动div
列，如果它不能完全放在页面上/用户看不到所有内容。我真的很欣赏你的问题的重点和礼貌。我几乎没见过这样的事。至于这个问题，我把它分成两部分，一部分是图像，一部分是页脚。快速响应的网页设计绝对是您所追求的。对于图像，请替换
.site-wrap img {
max-width: 100vw;
...
}
与
至于页脚，事情变得有点复杂，所以我举一个简单的例子来说明你可以做什么：
*{margin:0；padding:0；}
p{flex:1；}
#一{背景：红色；}
#两个{背景：粉红色；}
#三{背景：绿色；}
div{display:flex；flex direction:row；}
@介质（最小宽度：500px）{
div{flex direction:column；}
}
弗斯特
第二
第三
这是我找到的解决页脚问题的最简单示例。这允许页脚div向下移动，并在调整屏幕大小时创建新行。这有点过于简化了，但很容易理解。代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: Blue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p>text - XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</p>
</body>
</html>
…与：
.site-wrap img {
max-width: 100%;
...
}
谢谢你的密码
编辑1：下面是我最后实际用于页脚的代码，这是最困难的部分。我最后使用了上面提到的w3schools.com示例，并做了一些修改，即将nowrap
更改为wrap
：
HTML:
我认为你要寻找的恰当表达方式是“响应式网络设计”，你希望你的页面能够“贴身”地安装在手机和桌面上。元素的垂直对齐只是实现该功能所需的几种结构之一。看看我在Codepen上的画笔，它展示了一个适用于各种设备的卡片列表的普通CSS解决方案。它使用CSS Flexbox布局进行定位，使用一些线性方程进行大小调整和字体缩放。显然不是你的网站，但它很容易理解…而且，就像我通常做的那样，大多数代码都是正确的注释，所以它应该是相当自解释的。将代码复制到新文档中，并在浏览器中打开它（在Codepen外部），然后开始调整浏览器窗口的大小以查看发生了什么。请随意询问更多或输入SO chat…通过SO chat：您必须邀请某人到房间。这是最糟糕的访问，但总比什么都没有好。我总是需要搜索“帮助”来找出如何让它运行…@RenevanderLende-提供的答案Pine代码适用于img，所以我就这么做了。我正在看一看你的“卡片”例子，只看页脚，我不知道从哪里开始。如果我需要更多的帮助，我会给你发聊天。如果您有时间，请随时发布答案：）无论哪种方式，谢谢。谢谢！我试过：.site wrap-img{max-width:100%；max-height:45vh；display:block；margin-left:auto；margin-right:auto；}footer{display:flex；flex-direction:row；}@media（min-width:500px）{footer{flex-direction:column；}footer>a{flex:1；}
它似乎不起作用。我的页脚没有
s，所以我猜。这是最好的方法吗？如果页脚div列不能完全显示在屏幕上，我会尝试让它们向下和向左移动。我现在将把这一点补充到问题中。我的错。霍
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: Blue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p>text - XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">
<title>Example for MadBoy</title>
<style id="ers-globals-default">
/**************************/
/* preferred global rules */
/**************************/
html,body { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, * { box-sizing: inherit }
body { margin: 0 }
/* responsive base font size using y = mx + b */
html { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
/***************************************/
/* responsive FLEXBOX bands and blocks */
/***************************************/
/*
For use as easy 'landingpage' content containers
[band] - horizontal content like a strip
[block] - vertical content like a list
- Can both be used interchangeably and nested
(band of blocks, block of bands, band of blocks holding bands of...)
- Invert orientation with 'rows'/'cols' parameter ( *= means: contains )
*/
[band],[block] { display: flex; position: relative; overflow: hidden }
[band],[block] { justify-content: center; align-content: center }
[band],[band*="cols"] { flex-flow: row wrap } /* a row of columns, default */
[band*="rows"] { flex-flow: column wrap } /* a column of rows */
[block],[block*="rows"] { flex-flow: column wrap } /* inverse default of [band] */
[block*="cols"] { flex-flow: row wrap }
.padded,
[padded="1"],
[padded="0"] [band*="padded"],
[padded="0"] [block*="padded"] {
/*
responsive page padding using y = mx + b
and responsive band/block padding (same as responsive page padding, but at band/block level)
p1(320,32) p2(1920, 72) => 0.025x + 24
p3(320, 8) p4(1920,320) => 0.195x - 54.4
'band/block padding' is only active when 'page padding' is off
*/
padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}
</style>
<style id="stl-cards-default">
/****************/
/* FLEXBOX Card */
/****************/
/* Everything card related is FBL */
[band*="cards"]>*,
[card],[card]>* { display: flex; flex-wrap: wrap }
/* generic 'band' holding 1:N cards */
[band*="cards"]>* {
flex-basis: auto; /* Workaround, see comment below */
/* default width (4 to 6 vp columns, depends on [band] L/R padding) */
width: calc(1.9375vw + 277.8px); /* (320,284)(1920,315) */
/*
The preferred rule is flex-basis: calc(1.9375vw + 277.8px), without 'width' defined,
but I use border-box box model throughout this demo (and anywhere else b.t.w.), so:
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
"When a non-auto flex-basis is specified, Internet Explorer 10 and 11
always use a content-box box model to calculate the size of a flex item,
even if 'box-sizing: border-box' is applied to the element. See Flexbug #7 for more info."
Flexbug #7, https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box
See Flexbug #8 too, why 'flex-grow: 1' has to used for IE11 instead of 'flex: 1'
*/
flex-grow : 1; /* set to 0 for non-stretching cards */
/* align-self: flex-start; /* 'stretch' is preferred as 'flex-start' yields jagged heights */
}
/* TODO: maybe introduce W/H dependency with MQ 'orientation' */
[card] {
flex-direction: column; /* VERTICAL container of header,content,footer */
justify-content: space-between; /* moves header/footer to top/bottom of card */
width: 100%; height: 100%; /* for IE11 */
flex-wrap: nowrap;
}
[card]>* { width: 100%; max-width: 100% } /* All card main rows: fill-width */
[card]>item {
flex-direction: column; /* COLUMN of 1:N rows */
flex-grow: 1; /* card content, fill max available space */
overflow: auto; /* scroll content in case card max-height set */
}
</style>
<style id="stl-card-demo">
/*******************************************/
/* [OPTIONAL] Card eye-candy and animation */
/*******************************************/
[band*="header"],
[band*="cards"] { background-color: rgba( 75, 84,104,.6);color: rgba(255,255,255,.8) }
[band*="cards"]>* { /* 'height' must have VW too, otherwise ratios will be incorrect */
/* height : calc((1.9375vw + 277.8px) * 1.77778); /* Fixed W/H ratio 16:9 */
/* max-height: calc((1.9375vw + 277.8px) * 1.77778);
/* Adjust 'max-height' to choosen ratio or 0 in case of 'auto' (or remove) */
cursor: pointer; /* It's animated, ok? So, no...clicker-de-click */
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none
}
[card]>header { justify-content: center }
[card]>footer { justify-content: flex-end }
/*
minimal padding around cards, but only if not already padded
(nasty little trick with selector preference => [padded] will not work here
because of same preference as [band])
*/
[band*="cards"]:not(.padded),
[band*="cards"]>* { padding: calc(0.125vmin + 1.6px)} /* 2,4>1920 */
[card] > :not(.media) { padding: calc(0.5vmin + 14.4px) } /* 16,24>1920 */
[card] {
background-color: rgba(255,255,255,1); /* white */
color: rgba( 89, 89, 89,1); /* Davy's Grey */
opacity: .95; /* for a subtle color diffence on :hover */
/* Google Material Components Web default card elevation */
box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20),
0px 1px 1px 0px rgba(0,0,0,.14),
0px 1px 3px 0px rgba(0,0,0,.12); /* elevation 1dp */
}
[card]:hover {
opacity: 1; /* ditto */
box-shadow: 0px 3px 5px -1px rgba(0,0,0,.20),
0px 5px 8px 0px rgba(0,0,0,.14),
0px 1px 14px 0px rgba(0,0,0,.12); /* elevation 5dp */
}
[card]:active,
[card]:focus { transform: scale(0.995) }
</style>
<style id="ers-utility-default">
/**************************************************/
/* Utility rules, first so they can be overridden */
/**************************************************/
body { cursor: default } /* Plain arrow for everything, but... */
input { cursor: auto } /* ...use HTML default cursor on inputs, unless it is an: */
input[list="datalist"],input[type="button"],input[type="checkbox"],input[type="radio"],
input[type="color"],input[type="range"],input[type="reset"],input[type="file"],input[type="submit"],
label:not([for=""]),
a,button,select,keygen { cursor: pointer }
[contenteditable="true"] { cursor: text }
/* Darker/more contrast text (put in <body>)
=> GPU intensive, set default to "0" if document scroll feels too sluggish. */
[cleartype="1"] { text-shadow: .1px .1px .2px hsla(0,0%,15%,.35),
-.1px -.1px .2px hsla(0,0%,15%,.25) }
h1,h2,h3,h4,h5,h6,b,
[cleartype="0"],strong { text-shadow: none } /* exceptions, no need to go even 'bolder' */
/* prohibit user from selecting text (put in <body>) */
.noselect,[select="0"],[noselect] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
.select ,[select="1"],[select] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text }
/* enable user to select text (put in specific elements) */
[push*="R"] { margin-left : auto } /* push elements Right/Left/Top/Bottom */
[push*="L"] { margin-right : auto }
[push*="T"] { margin-top : auto }
[push*="B"] { margin-bottom: auto }
[align*="C"] { text-align: center } /* text alignment */
[align*="J"] { text-align: justify }
[align*="L"] { text-align: left }
[align*="R"] { text-align: right }
[hide], [data-hide="1"] {
display: none; position: absolute; overflow: hidden; clip: rect(0 0 0 0);
z-index: -999999; top: -999999px; margin: -1px; padding: 0; border: 0;
height: 1px; width: 1px; min-height: 0; min-width: 0; max-height: 0; max-width: 0
}
::-moz-focus-inner { padding: 0; border: 0 } /* Firefox */
:focus { outline: dotted rgba(60,69,78,.5) 2px }
:focus { outline: -webkit-focus-ring-color auto 0; outline-width: 0 } /* for Edge 2020 */
/* show all elements with outlines (put in <body>) */
[outlines="1"] * { outline: 1px dashed }
</style>
</head>
<body padded="0" cleartype="0" outlines="0">
<div block>
<header band="header">
<h1>headline</h1>
</header>
<article band="list.cards" class="padded">
<div>
<div card>
<img class="media" src="https://via.placeholder.com/320x240">
<header><h3>interactive SVG</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=1">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=2">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=3">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=4">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=5">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=6">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=7">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=8">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=9">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
</article>
</div>
</body>
</html>
.site-wrap img {
max-width: 100vw;
...
}
.site-wrap img {
max-width: 100%;
...
}
<!-- start =============================================================== footer ============================================= end -->
<footer>
<div class="navLeftFooter nav-globe" id="navFooter">
<a href="#top" id="navBackToTop">
<div class="navFooterBackToTop">
<span class="navFooterBackToTopText">Go Back to Top of Page</span>
</div>
</a>
<div class="navFooterLine navFooterLinkLine navFooterPadItemLine">
<div class="navFooterLine navFooterLogoLine">
<figure id="FigLogoTiny">
<img src="/images/CII%20-%20favicon%20for%20website%20-%202020-09-17%200435.png" />
</figure>
</div>
<div class="navFooterLine"></div>
</div>
<!-- ========================================================================== footer lists - begin =================================================================== -->
<div class="flex-container">
<div>
<p class="navFooterColHead">Get Involved with CII's Platform</p>
<ul>
<li class="nav_first">
<a href="TheMovement.html" class="nav_a">The Movement</a>
</li>
<li>
<a href="c11.html" class="nav_a">c11</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">CII</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Report Something</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Pay Something Forward</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Report a "Do-gooder"</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output Organization</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output Business</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output nonprofit</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output Government/Country</a>
</li>
<li class="nav_last">
<a href="ContactUs.html" class="nav_a">Help</a>
</li>
</ul>
</div>
<div>
<p class="navFooterColHead">Get to Know Us</p>
<ul>
<li class="nav_first">
<a href="ContactUs.html" class="nav_a">Become an Affiliate</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Become a Strategic Partner</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Offer Your Product or Service/"Advertise"</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Submit an Ideology for Consideration</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Submit an Idea for Consideration</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Submit a Core Value for Consideration</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Submit a Concept for Consideration</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Submit a Core Change for Consideration</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Submit Anything Else</a>
</li>
<li>
<a href="Tactics.html" class="nav_a">Tactical Strategy</a>
</li>
</ul>
</div>
<div>
<p class="navFooterColHead">Help Others</p>
<ul>
<li class="nav_first">
<a href="GetInvolved.html" class="nav_a">Careers & Volunteering</a>
</li>
<li>
<a href="TheCeosStory.html" class="nav_a">Blog</a>
</li>
<li>
<a href="AboutUs.html" class="nav_a">About CII</a>
</li>
<li>
<a href="AboutUs.html#TargetSusCsr" class="nav_a">Sustainability</a>
</li>
<li>
<a href="News.html" class="nav_a">News & Press Center</a>
</li>
<li>
<a href="ContactUs.html" class="nav_a">Donor Relations</a>
</li>
</ul>
</div>
<!-- <div>4</div> -->
<!-- <div>5</div> -->
<!-- <div>6</div> -->
<!-- <div>7</div> -->
<!-- <div>8</div> -->
</div>
<div class="nav-footer-line"></div>
<p style="text-align: center; color: white; background-color: black;">© 2020, Confluence Infinite International NPO or its
affiliates</p>
</div>
</footer>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: Gray;
}
.flex-container > div {
background-color: #f1f1f1;
width: 427px;
margin: 11px;
text-align: center;
line-height: 1.75rem;
font-size: 1rem;
overflow-wrap: break-word;
word-wrap: break-word;
/* float: left; */
}
.flex-container > ul {
list-style-type: none;
}
.flex-container > div > a:hover {
text-decoration: underline;
}