好的，所以我有一个部分，其中包含不同的元素，例如图形和p。我目前的问题是我尝试使用flex wrap和我在CSS中可以找到的所有其他包装来包装这些元素，但它在某种程度上不起作用，文本只是在该部分之外。
我将一个名为's1'的类中的元素关联起来，我需要将它放在一个部分或其父级中，并使用一个名为'sec1'的类。我需要它们作为3列。
小提琴：http://jsfiddle.net/Hiroga/unu7ghau/
CSS：
/*
ColorCombo Ref:http://www.colorcombos.com/color-schemes/107/ColorCombo107.html
#6699CC
#003366
#C0C0C0
#000044
*/
body {
width:auto;
height:auto;
background-color:#000044;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size:14px;
}
/*Navigation Menu*/
nav {
display:flex;
width:auto;
height:auto;
justify-content:center;
align-content:center;
background-color:#C0C0C0;
border-radius:5px;
box-shadow:5px 5px 5px;
padding:5px;
}
nav > div {
margin-right:5px;
padding:5px;
cursor:pointer;
}
.menu > span {
border-radius:5px;
border-bottom:3px solid black;
}
.items {
display:none;
}
.menu:hover > .items {
display:flex;
flex-direction:column;
}
.menu:hover > .items > div {
margin:2px;
border-radius:3px;
background-color:#6699CC;
padding:3px;
}
.menu:hover > span {
border-bottom:none;
}
.menu:hover > :nth-child(2) {
margin-top:1px;
border-radius:5px;
border-top:3px solid black;
}
.menu:hover > :last-child {
border-radius:5px;
border-bottom:3px solid black;
}
/*Body*/
.main {
display:flex;
flex-direction:row;
justify-content:space-between;
width:auto;
height:500px;
background-color:#003366;
border-radius:5px;
margin-top:5px;
box-shadow:5px 5px 5px;
padding:10px;
}
.main > article {
width:85%;
background-color:#6699CC;
border-radius:5px;
margin-right:5px;
box-shadow:5px 5px 5px;
padding:5px;
}
.main > aside {
width:15%;
background-color:#6699CC;
border-radius:5px;
margin-left:5px;
box-shadow:5px 5px 5px;
padding:5px;
}
/*Section*/
article {
height:auto;
}
article section {
display:flex;
flex-direction:column;
flex-flow:wrap;
}
article .sec1 {
width:33%;
height:auto;
font-size:12px;
}
.sec1 > figure > img {
width:100%;
height:auto;
}
.sec1 > figure > figcaption {
position:absolute;
display:inline;
opacity:0;
}
.sec1 > figure:hover > figcaption {
display:block;
font-size:12px;
background-color:white;
border:1px solid black;
width:400px;
border-radius:5px;
padding:5px;
text-align:justify;
transition:opacity .5s ease-in-out;
opacity:1;
}
HTML：
<body>
<!--Navigation-->
<nav>
<div> Home </div>
<div class="menu"> <span>Menu</span>
<div class="items">
<div> Item 1 </div>
<div> Item 2 </div>
<div> Item 3 </div>
</div>
</div>
<div class="menu"> <span>Menu 2</span>
<div class="items">
<div> Item 4 </div>
<div> Item 5 </div>
<div> Item 6 </div>
</div>
</div>
</nav>
<!--Body-->
<div class="main">
<article>
<section class="sec1">
<figure class="s1"> <img src="images/US-Flag.png" />
<figcaption>The national flag of the United States of America, often referred to as the American flag, consists of thirteen equal horizontal stripes of red (top and bottom) alternating with white, with a blue rectangle in the canton (referred to specifically as the "union") bearing fifty small, white, five-pointed stars arranged in nine offset horizontal rows of six stars (top and bottom) alternating with rows of five stars. The 50 stars on the flag represent the 50 states of the United States of America and the 13 stripes represent the thirteen British colonies that declared independence from the Kingdom of Great Britain and became the first states in the Union.[1] Nicknames for the flag include the "Stars and Stripes", "Old Glory",[2] and "The Star-Spangled Banner".</figcaption>
</figure>
<p class="s1"> The United States of America (USA or U.S.A.), commonly referred to as the United States (US or U.S.), America, and sometimes the States, is a federal republic[17][18] consisting of 50 states and a federal district. The 48 contiguous states and Washington, D.C., are in central North America between Canada and Mexico. The state of Alaska is the northwestern part of North America and the state of Hawaii is an archipelago in the mid-Pacific. The country also has five populated and nine unpopulated territories in the Pacific and the Caribbean. At 3.80 million square miles (9.85 million km2)[4] and with around 318 million people, the United States is the world's third- or fourth-largest country by total area and third-largest by population. It is one of the world's most ethnically diverse and multicultural nations, the product of large-scale immigration from many countries.[19] The geography and climate of the United States is also extremely diverse, and it is home to a wide variety of wildlife. </p>
<p class="s1"> Paleo-Indians migrated from Eurasia to what is now the U.S. mainland around 15,000 years ago,[20] with European colonization beginning in the 16th century. The United States emerged from 13 British colonies located along the Atlantic seaboard. Disputes between Great Britain and these colonies led to the American Revolution. On July 4, 1776, as the colonies were fighting Great Britain in the American Revolutionary War, delegates from the 13 colonies unanimously issued the Declaration of Independence. The war ended in 1783 with the recognition of independence of the United States from the Kingdom of Great Britain, and was the first successful war of independence against a European colonial empire.[21][22] The current Constitution was adopted on September 17, 1787. The first ten amendments, collectively named the Bill of Rights, were ratified in 1791 and designed to guarantee many fundamental civil rights and freedoms. </p>
</section>
</article>
<!--Sidebar-->
<aside> </aside>
</div>
</body></html>
答案 0 :(得分：0)
变化：
.main {
display:flex;
flex-direction:row;
justify-content:space-between;
width:auto;
min-height:500px;
background-color:#003366;
border-radius:5px;
margin-top:5px;
box-shadow:5px 5px 5px;
padding:10px;
}
答案 1 :(得分：0)
CSS
.main {
display:flex;
flex-direction:row;
justify-content:space-between;
width:auto;
height:auto;
background-color:#003366;
border-radius:5px;
margin-top:5px;
box-shadow:5px 5px 5px;
padding:10px;
}
.clear{
clear:both;
}
HTML
<section class="sec1">
<figure class="s1">
<img src="images/US-Flag.png" />
<figcaption>The national flag of the United States of America, often referred to as the American flag, consists of thirteen equal horizontal stripes of red (top and bottom) alternating with white, with a blue rectangle in the canton (referred to specifically as the "union") bearing fifty small, white, five-pointed stars arranged in nine offset horizontal rows of six stars (top and bottom) alternating with rows of five stars. The 50 stars on the flag represent the 50 states of the United States of America and the 13 stripes represent the thirteen British colonies that declared independence from the Kingdom of Great Britain and became the first states in the Union.[1] Nicknames for the flag include the "Stars and Stripes", "Old Glory",[2] and "The Star-Spangled Banner".</figcaption>
</figure>
<p class="s1">
The United States of America (USA or U.S.A.), commonly referred to as the United States (US or U.S.), America, and sometimes the States, is a federal republic[17][18] consisting of 50 states and a federal district. The 48 contiguous states and Washington, D.C., are in central North America between Canada and Mexico. The state of Alaska is the northwestern part of North America and the state of Hawaii is an archipelago in the mid-Pacific. The country also has five populated and nine unpopulated territories in the Pacific and the Caribbean. At 3.80 million square miles (9.85 million km2)[4] and with around 318 million people, the United States is the world's third- or fourth-largest country by total area and third-largest by population. It is one of the world's most ethnically diverse and multicultural nations, the product of large-scale immigration from many countries.[19] The geography and climate of the United States is also extremely diverse, and it is home to a wide variety of wildlife.
</p>
<p class="s1">
Paleo-Indians migrated from Eurasia to what is now the U.S. mainland around 15,000 years ago,[20] with European colonization beginning in the 16th century. The United States emerged from 13 British colonies located along the Atlantic seaboard. Disputes between Great Britain and these colonies led to the American Revolution. On July 4, 1776, as the colonies were fighting Great Britain in the American Revolutionary War, delegates from the 13 colonies unanimously issued the Declaration of Independence. The war ended in 1783 with the recognition of independence of the United States from the Kingdom of Great Britain, and was the first successful war of independence against a European colonial empire.[21][22] The current Constitution was adopted on September 17, 1787. The first ten amendments, collectively named the Bill of Rights, were ratified in 1791 and designed to guarantee many fundamental civil rights and freedoms.
</p>
<div class="clear"></div>
</section>
答案 2 :(得分：0)
我以某种方式修复它，我从头开始从主要编写它，但这是更新的。它现在正在做三个专栏。如果屏幕足够大。
小提琴：http://jsfiddle.net/Hiroga/054367k9/
CSS：
.main {
display:flex;
flex-direction:row;
justify-content:space-between;
width:auto;
height:auto;
background-color:#003366;
border-radius:5px;
margin-top:5px;
box-shadow:5px 5px 5px;
padding:10px;
}
.main > article {
width:85%;
background-color:#6699CC;
border-radius:5px;
margin-right:5px;
box-shadow:5px 5px 5px;
padding:10px;
}
.main > aside {
width:15%;
background-color:#6699CC;
border-radius:5px;
margin-left:5px;
box-shadow:5px 5px 5px;
padding:5px;
}
/*Section*/
.art1 > section {
padding:10px;
display:flex;
flex-direction:column;
flex-flow:wrap;
justify-content:space-around;
background-color:#99CCFF;
border-radius:5px;
box-shadow:5px 5px 5px;
width:auto;
}
.art1 > section > p {
max-width:300px;
text-align:justify;
}
.art1 > section > figure, .art1 > section > figure > img {
display:flex;
flex-direction:column;
position:relative;
margin:0px;
padding:0px;
height:158px;
width:300px;
border-radius:5px;
align-self:center;
}
figcaption {
position:absolute;
border:1px solid black;
border-radius:5px;
background-color:white;
opacity:0;
font-size:0;
padding:5px;
margin:0;
cursor:default;
top:-1px;
transition:all 1s ease-in-out;
}
.art1 > section > figure:hover > figcaption {
font-size:smaller;
opacity:1;
}
HTML：
<div class="main">
<article class="art1">
<section>
<figure>
<img src="images/US-Flag.png" />
<figcaption>The national flag of the United States of America, often referred to as the American flag, consists of thirteen equal horizontal stripes of red (top and bottom) alternating with white, with a blue rectangle in the canton (referred to specifically as the "union") bearing fifty small, white, five-pointed stars arranged in nine offset horizontal rows of six stars (top and bottom) alternating with rows of five stars. The 50 stars on the flag represent the 50 states of the United States of America and the 13 stripes represent the thirteen British colonies that declared independence from the Kingdom of Great Britain and became the first states in the Union.[1] Nicknames for the flag include the "Stars and Stripes", "Old Glory",[2] and "The Star-Spangled Banner".</figcaption>
</figure>
<p>
The United States of America (USA or U.S.A.), commonly referred to as the United States (US or U.S.), America, and sometimes the States, is a federal republic[17][18] consisting of 50 states and a federal district. The 48 contiguous states and Washington, D.C., are in central North America between Canada and Mexico. The state of Alaska is the northwestern part of North America and the state of Hawaii is an archipelago in the mid-Pacific. The country also has five populated and nine unpopulated territories in the Pacific and the Caribbean. At 3.80 million square miles (9.85 million km2)[4] and with around 318 million people, the United States is the world's third- or fourth-largest country by total area and third-largest by population. It is one of the world's most ethnically diverse and multicultural nations, the product of large-scale immigration from many countries.[19] The geography and climate of the United States is also extremely diverse, and it is home to a wide variety of wildlife.
</p>
<p>
Paleo-Indians migrated from Eurasia to what is now the U.S. mainland around 15,000 years ago,[20] with European colonization beginning in the 16th century. The United States emerged from 13 British colonies located along the Atlantic seaboard. Disputes between Great Britain and these colonies led to the American Revolution. On July 4, 1776, as the colonies were fighting Great Britain in the American Revolutionary War, delegates from the 13 colonies unanimously issued the Declaration of Independence. The war ended in 1783 with the recognition of independence of the United States from the Kingdom of Great Britain, and was the first successful war of independence against a European colonial empire.[21][22] The current Constitution was adopted on September 17, 1787. The first ten amendments, collectively named the Bill of Rights, were ratified in 1791 and designed to guarantee many fundamental civil rights and freedoms.
</p>
<p>
Driven by the doctrine of manifest destiny, the United States embarked on a vigorous expansion across North America throughout the 19th century.[23] This involved displacing native tribes, acquiring new territories, and gradually admitting new states.[23] The American Civil War ended legal slavery in the country.[24] By the end of the 19th century, the United States extended into the Pacific Ocean,[25] and its economy began to soar.[26] The Spanish–American War and World War I confirmed the country's status as a global military power. The United States emerged from World War II as a global superpower, the first country to develop nuclear weapons, the only country to use them in warfare, and as a permanent member of the United Nations Security Council. The end of the Cold War and the dissolution of the Soviet Union left the United States as the sole superpower.
</p>
<p>
The United States is a developed country and has the world's largest national economy.[6] The economy is fueled by an abundance of natural resources and high worker productivity.[28] While the U.S. economy is considered post-industrial, it continues to be one of the world's largest manufacturers.[29] The country accounts for 37% of global military spending,[30] being the world's foremost economic and military power, a prominent political and cultural force, and a leader in scientific research and technological innovations.
</p>
</section>
</article>
<!--Sidebar-->
<aside>
</aside>
</div>