Javascript 如何包装属于一个类的一组元素以适应其父元素?

Javascript 如何包装属于一个类的一组元素以适应其父元素?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,好的,我有一个部分,里面有不同的元素,比如一个数字和一个p。我目前的问题是,我尝试使用flex wrap和CSS中的所有其他包装来包装这些元素,但不知怎么的,它没有起作用,文本只是超出了部分 我将一个名为“s1”的类中的元素关联起来,我需要将它与一个名为“sec1”的类匹配到一个节或其父类中。我需要把它们分成3列 小提琴: CSS: HTML: 更改: .main { display:flex; flex-direction:row; justify-content:sp

好的,我有一个部分,里面有不同的元素,比如一个数字和一个p。我目前的问题是,我尝试使用flex wrap和CSS中的所有其他包装来包装这些元素,但不知怎么的,它没有起作用,文本只是超出了部分

我将一个名为“s1”的类中的元素关联起来,我需要将它与一个名为“sec1”的类匹配到一个节或其父类中。我需要把它们分成3列

小提琴:

CSS:

HTML:

更改:

.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;
}
css

html


我以某种方式修复了它,我从头开始写,但这是更新的一个。它现在有三个栏目。如果屏幕足够大

小提琴:

CSS:

HTML:


啊,我忘了指出,我正计划将它们作为三列放在一个部分中…很抱歉,我忘了指出我需要它们在三列布局中放在其父元素中…@GianPatrick更新了答案用法
<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>
.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;
}
.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;
}
<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>
.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;
}
<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>