The float property indicates in which direction to display an element being inserted on a web page.

The author selected the Diversity in Tech Fund to receive a donation as part of the Write for DOnations program.

Nội dung chính Show

Introduction
Prerequisites
Setting Up the Initial HTML and CSS
Floating Content
Floating Image at a Given Screen Width
Column content
Column List

Introduction

There are many ways to work with layout on the web. The modern approaches tend to rely on CSS Grid and Flexbox properties to create many web layouts. However, before Grid and Flexbox existed, web developers relied heavily on the float and columns properties. The float property is used to allow inline elements to wrap around a floating element, and column sets parameters for arranging text in columns. Because these properties also have properties that neither Grid and Flexbox can replicate, learning this method of layout can add options and flexibility to a designer’s set of skills.

In this tutorial you will work with the float and columns properties to create various layout styles and effects. You will use the float property to float a pull quote and an image and cause the content to wrap around those elements. Then you will use the columns property to adjust vertically long content to spread across the horizontal axis. Additionally, the concepts and methods of responsive web design will be covered as you work to apply the various styles.

Prerequisites

An understanding of CSS’s cascade and specificity features, which you can get by reading How To Apply CSS Styles to HTML with Cascade and Specificity.
Knowledge of type selectors, combinator selectors, and selector groups, which you can find in How To Select HTML Elements to Style with CSS.
An understanding of laying out text with CSS, which you can find in the How To Lay Out Text with CSS tutorial.
An empty HTML file saved on your local machine as index.html that you can access from your text editor and web browser of choice. To get started, check out our How To Set Up Your HTML Project tutorial, and follow How To Use and Understand HTML Elements for instructions on how to view your HTML in your browser. If you’re new to HTML, try out the whole How To Build a Website with HTML series.

Setting Up the Initial HTML and CSS

In this section you will set up the base HTML and CSS that will be used throughout the tutorial. You will use demo text content from Cupcake Ipsum and the font Comfortaa from Google Fonts.

To begin, open the index.html file in your text editor. Then, add the following HTML to the file:

index.html

doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Cupcake Layoutstitle> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="styles.css" /> head> <body> body> html>

There are a lot of page settings being defined inside the element. The first element defines the characters set to use for the text. This way most special characters, such as an accent mark, will render without special HTML codes. The second element tells browsers (mobile browsers in particular) to treat the width of the device as the width of the content; otherwise the browser will simulate a 960 pixel desktop width. The element provides the browser with the title of the page. The <link> elements load in the page styles: The first two load in the font, Comfortaa, from Google Fonts and the last loads the styles you will write for this tutorial.</p><p>Next, the page will need content to style. You will use sample content from Cupcake Ipsum as filler copy to work with the styles. Throughout the tutorial, new code will be highlighted.</p><p>Return to index.html in your text editor and add the highlighted HTML from the following code block:</p><p>index.html</p><span><span><!</span><span>doctype</span> <span>html</span><span>></span></span> <span><span><span><</span>html</span><span>></span></span> <span><span><span><</span>head</span><span>></span></span> ... <span><span><span></</span>head</span><span>></span></span> <span><span><span><</span>body</span><span>></span></span> <span><span><span><</span>article</span><span>></span></span> <span><span><span><</span>h2</span><span>></span></span>Carrot Cake Pie Toffee Cheesecake<span><span><span></</span>h2</span></span><span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Gummi bears powder tootsie roll biscuit. Icing jelly-o tootsie roll powder pie dessert biscuit tiramisu. Jelly beans pudding lemon drops sesame snaps jujubes sesame snaps gummi bears tiramisu. Apple pie danish soufflé soufflé cupcake cookie donut. Cookie gummies powder dragée powder chocolate bar muffin jelly marshmallow. Cheesecake dessert chocolate bar chocolate cake gingerbread chocolate bar gingerbread wafer brownie. Bear claw cake sugar plum muffin candy canes tart cheesecake croissant candy canes. Gummi bears carrot cake sweet chocolate. Carrot cake cake sweet bear claw. Gummi bears chocolate pie croissant chocolate cake bear claw dragée.<span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Tootsie roll cotton candy cake tiramisu pastry. Croissant oat cake ice cream dragée sweet roll soufflé marshmallow powder marzipan. Lemon drops cake bear claw cake sweet lollipop. Lollipop toffee liquorice apple pie gingerbread pastry tiramisu.<span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span><</span>h2</span><span>></span></span>Jelly Beans Wafer Apple Pie Icing<span><span><span></</span>h2</span></span><span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Jelly cotton candy cake pastry carrot cake. Topping icing danish. Lollipop sesame snaps muffin bonbon icing. Lollipop chocolate bar jelly-o sweet roll. Topping bear claw sweet. Apple pie bonbon sweet lemon drops caramels topping pastry. Biscuit jelly tootsie roll cookie tiramisu cotton candy. Icing chocolate cake liquorice ice cream sesame snaps cupcake chocolate bar pudding gingerbread. Donut toffee ice cream chocolate biscuit.<span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Carrot cake pie halvah toffee cheesecake chocolate cake gingerbread liquorice. Marshmallow danish candy fruitcake chocolate dessert. Bear claw chocolate bar sugar plum pudding cake cheesecake sweet. Marzipan lemon drops croissant gummies. Dessert carrot cake carrot cake cookie candy canes toffee. Biscuit bear claw candy canes muffin. Lollipop gummies tart danish tart sugar plum biscuit. Lemon drops muffin sugar plum sweet. Cotton candy pastry topping caramels gummies carrot cake marzipan tiramisu sesame snaps.<span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Ice cream donut cookie. Donut icing cookie sweet roll topping cookie. Jelly beans marzipan jujubes jelly beans ice cream marzipan apple pie cake. Sweet croissant sweet roll carrot cake oat cake tiramisu ice cream wafer wafer. Candy canes jelly beans toffee danish. Liquorice donut macaroon caramels. Donut pie cupcake gummies. Icing jujubes pudding apple pie pastry muffin sweet roll ice cream chocolate bar. Liquorice icing sugar plum marshmallow icing.<span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span><</span>h2</span><span>></span></span>Jelly Sugar Plum Chocolate Danish<span><span><span></</span>h2</span></span><span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Topping marzipan sesame snaps soufflé chupa chups cookie wafer cupcake. Jelly beans lollipop jelly beans. Chocolate cake lemon drops chupa chups candy icing tootsie roll danish liquorice. Gummies danish dragée apple pie jelly pie topping icing tootsie roll. <span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Apple pie bear claw muffin tiramisu gummi bears cake muffin. Candy canes oat cake croissant cake liquorice topping halvah dessert cheesecake. Candy fruitcake muffin. Cookie oat cake gummies brownie dessert candy canes icing. Soufflé chocolate cake pastry toffee cheesecake macaroon liquorice gummi bears. Halvah tiramisu jujubes. Bear claw candy danish. Macaroon chocolate wafer soufflé biscuit. Bear claw biscuit sesame snaps biscuit liquorice sweet roll lollipop. Marshmallow bear claw dragée icing liquorice candy donut chupa chups. Halvah dessert bonbon cupcake cupcake sugar plum cotton candy toffee muffin. Bonbon gummi bears jujubes chupa chups oat cake candy canes.<span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Gummies bonbon marzipan icing pudding. Jujubes croissant carrot cake. Pastry halvah pudding toffee. Lemon drops gingerbread chocolate apple pie jelly cheesecake.<span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Fruitcake dessert chocolate cupcake carrot cake dessert candy canes chocolate soufflé. Cookie cupcake marzipan sesame snaps biscuit tart pie jelly-o. Halvah tiramisu gummies biscuit powder donut. Chocolate cake bear claw macaroon.<span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span><</span>h2</span><span>></span></span>Gingerbread Macaroon Fruitcake<span><span><span></</span>h2</span></span><span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Jelly chocolate gummies cupcake liquorice chocolate. Sugar plum donut tiramisu muffin chupa chups. Cake caramels fruitcake jelly beans pudding I love pie lollipop jelly beans. Gummi bears cheesecake dragée I love fruitcake sesame snaps I love. Apple pie muffin donut. Fruitcake donut chocolate bar cotton candy topping candy macaroon I love. Fruitcake sesame snaps jelly-o. Tart wafer sugar plum I love apple pie biscuit. Pastry sesame snaps tart. Apple pie gingerbread chocolate candy canes.<span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>I love cake sweet roll toffee lemon drops bonbon sweet. Oat cake lemon drops candy canes topping macaroon.<span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Sweet cotton candy danish. Lollipop bear claw pudding carrot cake. Gummi bears candy canes chocolate cake chupa chups. Sugar plum jelly cake cookie cheesecake croissant muffin carrot cake. Pudding I love liquorice jelly-o caramels I love sweet roll bonbon oat cake. Caramels gummi bears gingerbread.<span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span></</span>article</span><span>></span></span> <span><span><span><</span>body</span><span>></span></span> <span><span><span></</span>html</span><span>></span></span> <p>Save these additions to your index.html file then open it in your web browser. The content will use the browser default styles, as shown in the following image:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." src="/dist/images/loading.svg" data-orgimg="https://ap.cdnki.com/r_the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---0fa4b5447abdd475c2097a3142dfeea2.webp"></img></div></p><p>Create a file called styles.css in the same folder as index.html and open it in your text editor. This file will contain all the styles used throughout the tutorial. The first set of styles will apply a general aesthetic that you will build on later. Apply the CSS from the following code block to your styles.css file:</p><p>styles.css</p><span>body</span> <span>{</span> <span>font</span><span>:</span> 100%/1.5 Comfortaa<span>,</span> sans-serif<span>;</span> <span>color</span><span>:</span> <span>hsl</span><span>(</span>300<span>,</span> 100%<span>,</span> 10%<span>)</span><span>;</span> <span>background-color</span><span>:</span> <span>hsl</span><span>(</span>300<span>,</span> 100%<span>,</span> 98%<span>)</span><span>;</span> <span>}</span> <span>article</span> <span>{</span> <span>width</span><span>:</span> 90%<span>;</span> <span>max-width</span><span>:</span> 75ch<span>;</span> <span>margin</span><span>:</span> 2rem auto<span>;</span> <span>}</span> <span>h2</span> <span>{</span> <span>font-size</span><span>:</span> 1.75rem<span>;</span> <span>color</span><span>:</span> <span>hsl</span><span>(</span>204<span>,</span> 100%<span>,</span> 29%<span>)</span><span>;</span> <span>margin</span><span>:</span> 1em 0 0.5em<span>;</span> <span>}</span> <span>h2</span> <span>{</span> <span>font-size</span><span>:</span> 1.5rem<span>;</span> <span>color</span><span>:</span> <span>hsl</span><span>(</span>204<span>,</span> 100%<span>,</span> 29%<span>)</span><span>;</span> <span>margin</span><span>:</span> 1em 0 0.5em<span>;</span> <span>}</span> <p>These styles add a minimal set of styles, using a shorthand font property on the body selector to set a new default font family and line height between lines of the text. The styles set to the article selector make the container have a width slightly smaller than the full screen width, but keep that content centered with the margin property set to auto for the left and right values. The article also has a maximum with of 75ch, which means it only gets as wide as 75 zero characters of the set font-size value. Lastly, the h2 and h2 selectors set a new font-size, color, and margin for each.</p><p>Save your changes to styles.css, then refresh index.html in your web browser. The following image shows how these new base styles will appear in the browser:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC8yLnBuZw==.webp" ></img></div></p><p>In this section you set up the the base HTML and CSS needed to begin adding float and columns content. In the next section, you will create a block quote that floats, allowing content to wrap around it. You will also create a horizontal rule line that stops content from wrapping around the floating element.</p><h2 id="floating-content">Floating Content</h2><p>Next you will add a <blockquote> element and apply a float property to cause the content to wrap around the floating content.</p><p>To create the quote content, open index.html in your text editor. After the first <p> content block, add a <blockquote> opening and closing tag. Inside the <blockquote> tags, add a new <p> content block with a couple of sentences from Cupcake Ipsum. After the next <p> content block, but before the <h2> heading, add a horizontal rule using a self-closing <hr /> element. The highlighted HTML in the following code block indicates where and what to add to your file:</p><p>index.html</p><span><span><!</span><span>doctype</span> <span>html</span><span>></span></span> <span><span><span><</span>html</span><span>></span></span> ... <span><span><span><</span>body</span><span>></span></span> <span><span><span><</span>article</span><span>></span></span> <span><span><span><</span>h2</span><span>></span></span>Carrot Cake Pie Toffee Cheesecake<span><span><span></</span>h2</span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Gummi bears powder tootsie roll biscuit. Icing jelly-o tootsie roll powder pie dessert biscuit tiramisu. Jelly beans pudding lemon drops sesame snaps jujubes sesame snaps gummi bears tiramisu. Apple pie danish soufflé soufflé cupcake cookie donut. Cookie gummies powder dragée powder chocolate bar muffin jelly marshmallow. Cheesecake dessert chocolate bar chocolate cake gingerbread chocolate bar gingerbread wafer brownie. Bear claw cake sugar plum muffin candy canes tart cheesecake croissant candy canes. Gummi bears carrot cake sweet chocolate. Carrot cake cake sweet bear claw. Gummi bears chocolate pie croissant chocolate cake bear claw dragée.<span><span><span></</span>p</span><span>></span></span> <span><span><span><</span>blockquote</span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Apple pie danish soufflé soufflé cupcake cookie donut. Cookie gummies powder dragée powder chocolate bar muffin jelly marshmallow.<span><span><span></</span>p</span></span><span><span>></span></span> <span><span><span></</span>blockquote</span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Tootsie roll cotton candy cake tiramisu pastry. Croissant oat cake ice cream dragée sweet roll soufflé marshmallow powder marzipan. Lemon drops cake bear claw cake sweet lollipop. Lollipop toffee liquorice apple pie gingerbread pastry tiramisu.<span><span><span></</span>p</span><span>></span></span> <span><span><span><</span>hr</span> <span>/></span></span> <span><span><span><</span>h2</span><span>></span></span>Jelly Beans Wafer Apple Pie Icing<span><span><span></</span>h2</span><span>></span></span> ... <span><span><span></</span>article</span><span>></span></span> <span><span><span></</span>body</span><span>></span></span> <span><span><span></</span>html</span><span>></span></span> <p>Save these changes to your index.html file, then return to the web browser and refresh the page. The quote will inherit some styles from the initial set of CSS you wrote, but still have some browser default styles applied. The following image shows how the quote and horizontal rule will appear in the browser:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC8zLnBuZw==.webp" ></img></div></p><p>To start adding styles to the quote content, open styles.css in your text editor. First create a blockquote element selector and then add a padding of 1rem, a background-color property set to a dark purple with hsl(204, 100%, 15%), and lastly a color property set to a light yellow with hsl(24, 100%, 85%) . Next, add a blockquote p combinator selector to increase the font-size of the content to 1.25rem and remove the default spacing by adding a margin property with a value of 0. The highlighted CSS in the following code block shows how this will be formatted in your text editor:</p><p>styles.css</p><span>... h2</span> <span>{</span> <span>font-size</span><span>:</span> 1.5rem<span>;</span> <span>color</span><span>:</span> <span>hsl</span><span>(</span>204<span>,</span> 100%<span>,</span> 29%<span>)</span><span>;</span> <span>margin</span><span>:</span> 1em 0 0.5em<span>;</span> <span>}</span> <span>blockquote</span> <span>{</span> <span>padding</span><span>:</span> 1rem<span>;</span> <span>background-color</span><span>:</span> <span>hsl</span><span>(</span>204<span>,</span> 100%<span>,</span> 15%<span>)</span><span>;</span> <span>color</span><span>:</span> <span>hsl</span><span>(</span>24<span>,</span> 100%<span>,</span> 85%<span>)</span><span>;</span> <span>}</span> <span>blockquote p</span> <span>{</span> <span>font-size</span><span>:</span> 1.25rem<span>;</span> <span>margin</span><span>:</span> 0<span>;</span> <span>}</span> <p>Save your changes to styles.css, then reload index.html in the web browser. The blockquote styling will now have larger text with a darker background and light yellow text, as shown in the following image:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC80LnBuZw==.webp" ></img></div></p><p>Next, you will apply the float property to the blockquote. There are three value options for the float property: left, right, and none. This means the floating content will either go the left side of the wrapping content or the right side. If the content is already floating, you can use none to remove the floating feature. For the blockquote, you will set it to float to the left, so the paragraph below it wraps to the right.</p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p><p>Return to styles.css in your text editor. In the blockquote element selector, add the float property with the value set to left, as highlighted in the following code block:</p><p>styles.css</p><span>... blockquote</span> <span>{</span> <span>padding</span><span>:</span> 1rem<span>;</span> <span>background-color</span><span>:</span> <span>hsl</span><span>(</span>204<span>,</span> 100%<span>,</span> 15%<span>)</span><span>;</span> <span>color</span><span>:</span> <span>hsl</span><span>(</span>24<span>,</span> 100%<span>,</span> 85%<span>)</span><span>;</span> <span>float</span><span>:</span> left<span>;</span> <span>}</span> ... <p>At this point the blockquote is floating, but it will not cause any content to wrap because of an aspect of how floating is handled with the contents inside. A floating element still expands to the natural width of the content. This means that since the content inside the blockquote is so long, it will still take up the same amount of space as though it were not floating. To force a visual change, add a width property set to a value of 40% to the blockquote selector, as highlighted in the following code block:</p><p>styles.css</p><span>... blockquote</span> <span>{</span> <span>padding</span><span>:</span> 1rem<span>;</span> <span>background-color</span><span>:</span> <span>hsl</span><span>(</span>204<span>,</span> 100%<span>,</span> 15%<span>)</span><span>;</span> <span>color</span><span>:</span> <span>hsl</span><span>(</span>24<span>,</span> 100%<span>,</span> 85%<span>)</span><span>;</span> <span>float</span><span>:</span> left<span>;</span> <span>width</span><span>:</span> 40%<span>;</span> <span>}</span> ... <p>Save these changes to styles.css and then refresh index.html in your web browser. The width of the <blockquote> element is now constrained to 40% of the parent container width, which allows the paragraph below to pull up and wrap on the right. The following image shows how this will appear in your browser:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC81LnBuZw==.webp" ></img></div></p><p>The last formatting adjustment that needs to be made to the blockquote is the spacing around the element.</p><p>Return to styles.css in your text editor. Then go to blockquote element selector block and add a margin property with a value of 0 1rem 1rem 0. The highlighted line of CSS in the following code block shows how this is formatted:</p><p>styles.css</p><span>... blockquote</span> <span>{</span> <span>padding</span><span>:</span> 1rem<span>;</span> <span>background-color</span><span>:</span> <span>hsl</span><span>(</span>204<span>,</span> 100%<span>,</span> 15%<span>)</span><span>;</span> <span>color</span><span>:</span> <span>hsl</span><span>(</span>24<span>,</span> 100%<span>,</span> 85%<span>)</span><span>;</span> <span>float</span><span>:</span> left<span>;</span> <span>width</span><span>:</span> 40%<span>;</span> <span>margin</span><span>:</span> 0 1rem 1rem 0<span>;</span> <span>}</span> ... <p>This margin value will set the right and bottom margin values to <strong>1rem</strong> and the top and left values to <strong>0</strong>, which provides space along the sides where the text wraps around the quote.</p><p>Save your changes to styles.css, then return to index.html in your web browser and refresh. The following image shows how this will appear in the browser:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC82LnBuZw==.webp" ></img></div></p><p>As it is now, the floating pull quote is large enough that it is causing the heading of the next section to wrap as well. This where the clear property is helpful to prevent this situation. The clear property, like float, has three property values to counteract the float property and stop content from wrapping. The values for clear are left, right, and a combination of the two with both. The element on which this property is placed will stop the wrapping from that point forward.</p><p>To use the clear property, open styles.css in your text editor. You will use the <hr /> element to apply the clear property, so begin by creating an hr element selector. Then, to add an aesthetic style, add a border property with a value of 0.125 rem solid hsl(300, 50%, 90%) to create a thick border. Next, add a margin property set to 3rem 0 so there is extra space above and below the border. Finally, add the clear property and use the both value to stop the content from wrapping around the quote element. The highlighted CSS in the following code block shows how to format these styles:</p><p>styles.css</p><span>... blockquote p</span> <span>{</span> <span>font-size</span><span>:</span> 1.25rem<span>;</span> <span>margin</span><span>:</span> 0<span>;</span> <span>}</span> <span>hr</span> <span>{</span> <span>border</span><span>:</span> 0.125rem solid <span>hsl</span><span>(</span>300<span>,</span> 50%<span>,</span> 90%<span>)</span><span>;</span> <span>margin</span><span>:</span> 3rem 0<span>;</span> <span>clear</span><span>:</span> both<span>;</span> <span>}</span> <p>Save your changes to styles.css and return to the browser and refresh index.html. As shown in the following image, the <hr> element is no longer wrapping to the right of the quote. Instead, the rule line is below, extending the full width of the content. However, the distance between the quote and the <hr> uses the margin on the float and not the larger margin value of the <hr> element:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC83LnBuZw==.webp" ></img></div></p><p>In this section, you applied a float to a <blockquote>, which caused the other elements to wrap around it. You also added the margin to give white space around the quote, making the wrapping content more legible. In the next section, you will float an image when the screen size reaches a certain width using a media query.</p><h2 id="floating-image-at-a-given-screen-width">Floating Image at a Given Screen Width</h2><p>There are three requirements for effective responsive web design: flexible width, resizable images, and media queries. In this step, you will use all three of these to cause an image to float to the right at a specific screen width, and then at a larger screen size pull the image into the right side margin.</p><p>To begin, load an image on to the page. Open index.html in your text editor, and add an <div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC84LnBuZw==.webp" ></img></div></p><p>Images on web pages, by default, are displayed at their given pixel size. In the case of the image added to the HTML earlier, it has a size of 450 pixels wide and 300 pixels tall. When loaded on a mobile phone that has a screen size smaller than 450 pixels wide, then the image will go off screen and cause a horizontal scroll bar. To set images to resize to fit the space contained, you can use width: 100% on the img. However, this approach allows the image to get larger than its actual size, distorting the image as it grows, known as pixelization. Instead it is better to use max-width: 100%, which allows the image to shrink into more restrictive spaces, but not grow past its actual size.</p><p>To create these resizing images, return to styles.css in your text editor. After the body element selector at the top of the document, add an img element selector. Inside the selector block add the max-width property with a value of 100%. The highlighted CSS in the following code block demonstrates how to set up the img selector:</p><p>styles.css</p><span>body</span> <span>{</span> <span>font</span><span>:</span> 100%/1.5 Comfortaa<span>,</span> sans-serif<span>;</span> <span>color</span><span>:</span> <span>hsl</span><span>(</span>300<span>,</span> 100%<span>,</span> 10%<span>)</span><span>;</span> <span>background-color</span><span>:</span> <span>hsl</span><span>(</span>300<span>,</span> 100%<span>,</span> 98%<span>)</span><span>;</span> <span>}</span> <span>img</span> <span>{</span> <span>max-width</span><span>:</span> 100%<span>;</span> <span>}</span> <span>article</span> <span>{</span> <span>width</span><span>:</span> 90%<span>;</span> <span>max-width</span><span>:</span> 75ch<span>;</span> <span>margin</span><span>:</span> 2rem auto<span>;</span> <span>}</span> ... <p>Save these changes to styles.css and refresh index.html in your web browser. Take the browser window and decrease the width to something closer to a phone size. The image will shrink once the window width becomes smaller than the width of the image. The following image shows how this will look in the browser on a narrow width window:</p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC85LnBuZw==.webp" ></img></div></p><p>Now that you have a responsively scaling image, you will next move the image to float right when there is sufficient space. Changing styles at a certain window or screen width is accomplished with special at-rule conditions called media queries. A media query is defined by using the @media rule followed by a media condition in which to apply the styles it contains. In this case, you want the window size to be at least 640px. Since the end user can affect the meaning of a pixel, divide 640 by 16 to get a rem unit value of 40. After the query is defined it will have its own set of curly braces, inside which are the selectors that need to change at the specified screen width.</p><p>Open the styles.css file in your text editor. Then create a media query set to a min-width of 40rem. Inside the query block, add an img element selector with a float property set to right. So the image doesn’t take up too much space in this view, set the max-width value to 50%. Lastly, use the margin property to add a margin to the left and bottom position of the image. The highlighted CSS in the following code block demonstrates how to add the media query and the associated styles:</p><p>styles.css</p><span>... blockquote p</span> <span>{</span> <span>font-size</span><span>:</span> 1.25rem<span>;</span> <span>margin</span><span>:</span> 0<span>;</span> <span>}</span> <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 40rem<span>)</span></span> <span>{</span> <span>img</span> <span>{</span> <span>float</span><span>:</span> right<span>;</span> <span>max-width</span><span>:</span> 50%<span>;</span> <span>margin</span><span>:</span> 0 0 1rem 1rem<span>;</span> <span>}</span> <span>}</span> ... <p>Save your changes to styles.css, then return to the browser and refresh the page. Be sure to resize your browser from a small screen size out to a more common desktop browser window size. The image will now float to the right with the text content wrapping around to the left, as shown in the following image:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC8xMC5wbmc=.webp" ></img></div></p><p>The text now defines the layout and leaves lots of extra space on the right and left when on a larger desktop screen size. In this case, it can be both aesthetically and functionally helpful to pull the image into that extra space. This can be done with a negative margin value on the floating element.</p><p>To create this effect, open styles.css in your text editor then add another media query for a min-width of 80rem, which is equivalent to 1280 pixels. Inside the query block, add an img element selector and return the max-width property to a value of 100%. Then add a margin property with the top and bottom positions set to 1rem and the left position set to 2rem. Set the right position to -40%. This value will pull the image into the white space on the right side of the content by 40% of the parent element’s width, not the img width. The highlighted CSS in the following code block demonstrates how to set this up:</p><p>styles.css</p>... <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 40rem<span>)</span></span> <span>{</span> <span>img</span> <span>{</span> <span>float</span><span>:</span> right<span>;</span> <span>max-width</span><span>:</span> 50%<span>;</span> <span>margin</span><span>:</span> 0 0 1rem 1rem<span>;</span> <span>}</span> <span>}</span> <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 80rem<span>)</span></span> <span>{</span> <span>img</span> <span>{</span> <span>max-width</span><span>:</span> 100%<span>;</span> <span>margin</span><span>:</span> 1rem -40% 1rem 2rem<span>;</span> <span>}</span> <span>}</span> ... <p>Save these changes to styles.css then refresh index.html in the browser. You may need to expand the width of your window, but once it reaches a width of approximately 1280 pixels the image will pull to the right and the content will continue to wrap on the left. The following image shows how this will appear in the browser:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC8xMS5wbmc=.webp" ></img></div></p><p>In this section you used a media query, a percentage width, and negative margin values to float an image and pull it into the white space of the layout. In the next section, you will begin to use the columns property to change some content from a single column to two columns at a given media query screen width.</p><h2 id="column-content">Column content</h2><p>When working with text content it can be helpful at times to adjust the layout so that the content is side by side, or even wrap from one column to the next. There are many ways to create columns with CSS, but only the columns property will divide the content of one element between different columns. In this section, you will use the columns property to create a two-column layout for the content to wrap. Then, you will use additional columns properties to create a dividing line between the columns and tell an element how to interact with the columns to force a column break.</p><p>To begin, open index.html and wrap the two paragraphs after <h2>Jelly Sugar Plum Chocolate Danish</h2> in a <div> element with a class property of column. The highlighted HTML in the following code block shows how this will look in your file:</p> <p>index.html</p><span><span><!</span><span>doctype</span> <span>html</span><span>></span></span> <span><span><span><</span>html</span><span>></span></span> ... <span><span><span><</span>body</span><span>></span></span> <span><span><span><</span>article</span><span>></span></span> ... <span><span><span><</span>h2</span><span>></span></span>Jelly Sugar Plum Chocolate Danish<span><span><span></</span>h2</span><span>></span></span> <span><span><span><</span>div</span> <span>class</span><span><span>=</span><span>"</span>column<span>"</span></span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Topping marzipan sesame snaps soufflé chupa chups cookie wafer cupcake. Jelly beans lollipop jelly beans. Chocolate cake lemon drops chupa chups candy icing tootsie roll danish liquorice. Gummies danish dragée apple pie jelly pie topping icing tootsie roll. <span><span><span></</span>p</span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Apple pie bear claw muffin tiramisu gummi bears cake muffin. Candy canes oat cake croissant cake liquorice topping halvah dessert cheesecake. Candy fruitcake muffin. Cookie oat cake gummies brownie dessert candy canes icing. Soufflé chocolate cake pastry toffee cheesecake macaroon liquorice gummi bears. Halvah tiramisu jujubes. Bear claw candy danish. Macaroon chocolate wafer soufflé biscuit. Bear claw biscuit sesame snaps biscuit liquorice sweet roll lollipop. Marshmallow bear claw dragée icing liquorice candy donut chupa chups. Halvah dessert bonbon cupcake cupcake sugar plum cotton candy toffee muffin. Bonbon gummi bears jujubes chupa chups oat cake candy canes.<span><span><span></</span>p</span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Gummies bonbon marzipan icing pudding. Jujubes croissant carrot cake. Pastry halvah pudding toffee. Lemon drops gingerbread chocolate apple pie jelly cheesecake.<span><span><span></</span>p</span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Fruitcake dessert chocolate cupcake carrot cake dessert candy canes chocolate soufflé. Cookie cupcake marzipan sesame snaps biscuit tart pie jelly-o. Halvah tiramisu gummies biscuit powder donut. Chocolate cake bear claw macaroon.<span><span><span></</span>p</span><span>></span></span> <span><span><span></</span>div</span><span>></span></span> <span><span><span><</span>h2</span><span>></span></span>Gingerbread Macaroon Fruitcake<span><span><span></</span>h2</span><span>></span></span> ... <span><span><span></</span>article</span><span>></span></span> <span><span><span></</span>body</span><span>></span></span> <span><span><span></</span>html</span><span>></span></span> <p>Save your changes to index.html, then return to styles.css in your text editor. When the content width is narrow, it is too small to be divided into columns. Instead, add a .column class selector within the min-width: 40rem media query. Then give the .column selector a columns property with a value of 2, as highlighted in the following code block:</p><p>styles.css</p>... <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 40rem<span>)</span></span> <span>{</span> <span>img</span> <span>{</span> <span>float</span><span>:</span> right<span>;</span> <span>max-width</span><span>:</span> 50%<span>;</span> <span>margin</span><span>:</span> 0 0 1rem 1rem<span>;</span> <span>}</span> <span>.column</span> <span>{</span> <span>columns</span><span>:</span> 2<span>;</span> <span>}</span> <span>}</span> <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 80rem<span>)</span></span> <span>{</span> ... <span>}</span> <p>Save the changes to styles.css and then refresh index.html in your web browser. The content of these two paragraphs will be separated into two columns with the first line of the second sentence at the bottom of the first column wrapping into the second column, as shown in the following image:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC8xMi5wbmc=.webp" ></img></div></p><p>There are a handful of columns properties. The columns property itself is a shorthand combination of column-count and column-width. Should you need to define a specified width of the columns, it is important to know columns are always equal in size. There are also two companion properties to help with the visual presentation of the columns. The first is column-gap, which allows for specifying spacing between each column. The second property is called column-rule, which functions similarly to a border, but only draws a vertical line between the columns.</p><p>To add a custom gap and rule, open styles.css in your text editor. In the .columns selector block, add the column-gap property with a value of 2rem. Next, add the column-rule property with a value of 2px solid hsl(300, 50%, 90%), which will create a vertical rule line between the columns using the same color as the <hr /> element earlier. The highlighted HTML in the following code block shows how this will look in your file:</p><p>styles.css</p>... <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 40rem<span>)</span></span> <span>{</span> <span>img</span> <span>{</span> <span>float</span><span>:</span> right<span>;</span> <span>max-width</span><span>:</span> 50%<span>;</span> <span>margin</span><span>:</span> 0 0 1rem 1rem<span>;</span> <span>}</span> <span>.column</span> <span>{</span> <span>columns</span><span>:</span> 2<span>;</span> <span>column-gap</span><span>:</span> 2rem<span>;</span> <span>column-rule</span><span>:</span> 2px solid <span>hsl</span><span>(</span>300<span>,</span> 50%<span>,</span> 90%<span>)</span><span>;</span> <span>}</span> <span>}</span> <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 80rem<span>)</span></span> <span>{</span> ... <span>}</span> <p>Save the changes to styles.css and refresh index.html in your web browser. The space between the columns has increased and in the middle of the gap is now a solid vertical rule line, as shown in the following image:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC8xMy5wbmc=.webp" ></img></div></p><p>Lastly, it is possible to apply properties to the elements inside the column to influence how they interact with the layout. The paragraph in the first column has more space on it than the text in the second column. This is because of how the column interacts with the margin property and the default margin value on <p> elements. The :first-child pseudo-class can be used to change the margin-top of the first <p> element inside the column. Next, there are a few properties to control how column elements interact with the column flow: break-inside, break-after, and break-before. You will use the break-inside property with the value avoid, which tells the browser to prevent breaking apart the contents of the <p> elements.</p><p>Return to styles.css in your text editor to begin applying these new styles to the column content. Inside the media query, add a combinator selector consisting of .column p:first-child to scope the styles to the first <p> element inside the <div class="columns"> element. Then add the margin-top property set to a value of 0. Create a new combinator selector of .column p to apply these styles to all the <p> elements inside the <div class="columns"> element. Finally, add the break-inside property with a value of avoid to keep the columns from breaking apart the content. The highlighted CSS in the following code block demonstrates how to set this up:</p><p>styles.css</p>... <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 40rem<span>)</span></span> <span>{</span> <span>... .column</span> <span>{</span> <span>columns</span><span>:</span> 2<span>;</span> <span>column-gap</span><span>:</span> 2rem<span>;</span> <span>column-rule</span><span>:</span> 2px solid <span>hsl</span><span>(</span>300<span>,</span> 50%<span>,</span> 90%<span>)</span><span>;</span> <span>}</span> <span>.column p:first-child</span> <span>{</span> <span>margin-top</span><span>:</span> 0<span>;</span> <span>}</span> <span>.column p</span> <span>{</span> <span>break-inside</span><span>:</span> avoid<span>;</span> <span>}</span> <span>}</span> ... <p><strong>Note:</strong> There are a some things to be aware of when it comes to using the break-inside, break-after, and break-before properties. While there is good browser support for these properties, the avoid value is the most well-supported, and the other values have mixed support. Additionally, the browsers that do support the avoid value will interpret when to break the column differently, causing varying layouts between browsers. Be cautious when using the property when visual parity is needed between browsers.</p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p><p>Save your changes to styles.css and refresh the page in your web browser. The second paragraph has now been forced fully into the first column. This may make the first column larger than the second, but the vertical rule accommodates the change. The first paragraph also now aligns at the top with the second column. The following image shows how this will look in most browser:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC8xNC5wbmc=.webp" ></img></div></p><p>In this section, you used the columns property to create two columns of flowing content. You used the column-gap property to provide more space and column-rule to create a dividing line between the columns. Finally, you used the break-inside property to force how the elements interacted with the column flow. In the last section you will apply the columns property to an ordered list and adjust its presentation with media queries.</p><h2 id="column-list">Column List</h2><p>In this last section, you apply what you have learned with columns, media queries, and negative margin values to style an ordered list. One of the advantages of the columns property comes in making long lists a much shorter height by dividing them into two or three columns.</p><p>To begin, you will need to add an ordered list to your HTML. Open index.html in your text editor and add the highlighted HTML in the following code block just before the last paragraph in your file:</p><p>index.html</p><span><span><!</span><span>doctype</span> <span>html</span><span>></span></span> <span><span><span><</span>html</span><span>></span></span> ... <span><span><span><</span>body</span><span>></span></span> <span><span><span><</span>article</span><span>></span></span> ... <span><span><span><</span>h2</span><span>></span></span>Gingerbread Macaroon Fruitcake<span><span><span></</span>h2</span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Jelly chocolate gummies cupcake liquorice chocolate. Sugar plum donut tiramisu muffin chupa chups. Cake caramels fruitcake jelly beans pudding I love pie lollipop jelly beans. Gummi bears cheesecake dragée I love fruitcake sesame snaps I love. Apple pie muffin donut. Fruitcake donut chocolate bar cotton candy topping candy macaroon I love. Fruitcake sesame snaps jelly-o. Tart wafer sugar plum I love apple pie biscuit. Pastry sesame snaps tart. Apple pie gingerbread chocolate candy canes.<span><span><span></</span>p</span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>I love cake sweet roll toffee lemon drops bonbon sweet. Oat cake lemon drops candy canes topping macaroon.<span><span><span></</span>p</span><span>></span></span> <span><span><span><</span>ol</span> <span>class</span><span><span>=</span><span>"</span>column-list<span>"</span></span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>Cookie I love gingerbread topping<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>Carrot cake toffee I love croissant pudding<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>Sesame snaps pastry jelly-o<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>Fruitcake pastry dessert<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>Lollipop gingerbread I love caramels<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>Toffee<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>Croissant pudding I love muffin<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>Dessert jelly beans<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>jelly beans<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>Liquorice<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>I love cotton candy<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>Apple pie<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>Lemon raspberry cheesecake<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span><</span>li</span><span>></span></span>muffin donut<span><span><span></</span>li</span></span><span><span>></span></span> <span><span><span></</span>ol</span><span>></span></span> <span><span><span><</span>p</span><span>></span></span>Sweet cotton candy danish. Lollipop bear claw pudding carrot cake. Gummi bears candy canes chocolate cake chupa chups. Sugar plum jelly cake cookie cheesecake croissant muffin carrot cake. Pudding I love liquorice jelly-o caramels I love sweet roll bonbon oat cake. Caramels gummi bears gingerbread.<span><span><span></</span>p</span><span>></span></span> ... <span><span><span></</span>article</span><span>></span></span> <span><span><span></</span>body</span><span>></span></span> <span><span><span></</span>html</span><span>></span></span> <p>Save your changes to index.html and reload the page in the web browser. As shown in the following image, the ordered list is numbered 1–14 in a single column of content:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC8xNS5wbmc=.webp" ></img></div></p><p>Next, open up styles.css in your text editor and just before the first media query create an ol element selector. You will then add styles to help the list stand out visually with padding, a background-color, and finally a border. The highlighted CSS in the following code block demonstrates how to set this up and the values to use for the properties:</p><p>styles.css</p><span>... blockquote p</span> <span>{</span> <span>font-size</span><span>:</span> 1.25rem<span>;</span> <span>margin</span><span>:</span> 0<span>;</span> <span>}</span> <span>ol</span> <span>{</span> <span>padding</span><span>:</span> 2rem<span>;</span> <span>background-color</span><span>:</span> <span>hsl</span><span>(</span>300<span>,</span> 60%<span>,</span> 95%<span>)</span><span>;</span> <span>border</span><span>:</span> 0.25rem solid <span>hsl</span><span>(</span>300<span>,</span> 50%<span>,</span> 90%<span>)</span><span>;</span> <span>}</span> <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 40rem<span>)</span></span> <span>{</span> ... <span>}</span> ... <p>Save the changes to styles.css then return to the web browser and refresh the page. The list will have a darker border and background color, as seen in the following image:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC8xNi5wbmc=.webp" ></img></div></p><p>Next, return to styles.css in your text editor to add the column styles. Like the paragraphs in the previous section, these columns are most effective for larger screen sizes and better as a single column on smaller screens. Add an ol element selector in the min-width: 40rem media query. In the selector block add a columns property with a value of 2. Then, because the numbers of the ordered list are outside the container, the columns need extra space between them. To accomodate for this extra content, add a column-gap property set to 3rem. Lastly, at larger screen sizes it can be helpful to give more vertical space between elements. Add a margin property with the top and bottom positions set to 2rem and the left and right to 0. The highlighted CSS in the following code block demonstrates how to set this up:</p><p>styles.css</p><span>... ol</span> <span>{</span> <span>padding</span><span>:</span> 2rem<span>;</span> <span>background-color</span><span>:</span> <span>hsl</span><span>(</span>300<span>,</span> 60%<span>,</span> 95%<span>)</span><span>;</span> <span>border</span><span>:</span> 0.25rem solid <span>hsl</span><span>(</span>300<span>,</span> 50%<span>,</span> 90%<span>)</span><span>;</span> <span>}</span> <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 40rem<span>)</span></span> <span>{</span> <span>... </span><span>ol</span> <span>{</span> <span>columns</span><span>:</span> 2<span>;</span> <span>column-gap</span><span>:</span> 3rem<span>;</span> <span>margin</span><span>:</span> 2rem 0<span>;</span> <span>}</span> <span>}</span> ... <p>Save your changes to styles.css and return to the browser to refresh index.html. Be sure your browser window is at least 640 pixels wide. The list is now separated into two columns of similar length, as shown in the following image:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC8xNy5wbmc=.webp" ></img></div></p><p>Next, the items in the ordered list could use more space between each. Return to styles.css in your text editor. After the ol selector in the (min-width: 40rem) media query, add a ol li combinator selector. In the selector block, add a margin-bottom property set to 1em, which sets it to be equal to the li element’s font-size. The highlighted CSS in the following code block shows where and how to add these styles:</p><p>styles.css</p>... <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 40rem<span>)</span></span> <span>{</span> <span>... ol</span> <span>{</span> <span>columns</span><span>:</span> 2<span>;</span> <span>column-gap</span><span>:</span> 3rem<span>;</span> <span>margin</span><span>:</span> 2rem 0<span>;</span> <span>}</span> <span>ol li</span> <span>{</span> <span>margin-bottom</span><span>:</span> 1em<span>;</span> <span>}</span> <span>}</span> ... <p>Save the changes to your index.html file, then return to the web browser and refresh the page. The spacing between each list item is now much larger, making the list more easily scanned by the reader. The following image shows how the list spacing looks in the browser:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC8xOC5wbmc=.webp" ></img></div></p><p>Lastly, return to styles.css in your text editor to apply a third column when there is enough screen space. Start by adding a ol element selector in the (min-width: 80rem) media query, then add a columns property set to 3. The gap between the columns will be inherited from the previous media query because you are using min-width queries, so that does not need to be redefined. However, three columns need extra space so the columns are not too narrow. In order to give the list extra space, add a margin property that keeps the top and bottom positions set to 2rem, but changes the left and right positions to a negative value of -5rem. The highlighted CSS in the following code block demonstrates how to set this up:</p><p>styles.css</p>... <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 40rem<span>)</span></span> <span>{</span> ... <span>}</span> ... <span><span>@media</span> <span>(</span><span>min-width</span><span>:</span> 80rem<span>)</span></span> <span>{</span> <span>img</span> <span>{</span> <span>float</span><span>:</span> right<span>;</span> <span>width</span><span>:</span> 80%<span>;</span> <span>margin</span><span>:</span> 1rem -40% 1rem 2rem<span>;</span> <span>}</span> <span>ol</span> <span>{</span> <span>columns</span><span>:</span> 3<span>;</span> <span>margin</span><span>:</span> 2rem -5rem<span>;</span> <span>}</span> <span>}</span> ... <p>Save your changes to styles.css, then reload index.html in the web browser. Like the floating image earlier, this negative value will pull the sides of the list into the extra side space of the page. This creates a visual prominence that brings attention to the list. The following image shows how this looks in the browser:</p><p><div class="imgBox"><img alt="The float property indicates in which direction to display an element being inserted on a web page." data-orgimg="https://sg.cdnki.com/the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page---aHR0cHM6Ly9hc3NldHMuZGlnaXRhbG9jZWFuLmNvbS9hcnRpY2xlcy82NzgwOC8xOS5wbmc=.webp" ></img></div></p><p>In this last section you combined everything you learned from the previous sections. You used media queries, columns, and negative margins to create a striking ordered list style that can be used to help lists have a more interesting presentation.</p><h2>Conclusion</h2><p>There are many ways to lay out content with CSS, and each property has its own special strength. In this tutorial, you used the float property to create elements that cause the other content to wrap around it. You also used the columns property to create content that flows from one column to the next. Additionally, you put into practice some of the principles of effective responsive design using media queries and flexible widths. As you approach layout solutions in your web projects, it is important to be aware of the various ways to accomplish the task. Both the float and columns properties provide a way to create something unique and help provide good visual design.</p><p>If you would like to read more CSS tutorials, try out the other tutorials in the How To Style HTML with CSS series.</p><div class='paramage'></div> <div class="contenBreak"></div></p></div> <div class="readmore_content_exists"><button id="readmore_content"><span class="arrow"><span></span></span>Đọc tiếp</button></div> </td></tr></table> <script async src="/dist/js/lazyhtml.min.js" crossorigin="anonymous"></script> <div class="lazyhtml" data-lazyhtml> <script type="text/lazyhtml"> <div class="youtubeVideo"><h3>Video liên quan</h3> <iframe width="560" height="315" src="https://www.youtube.com/embed/L7B-1mbHWe8?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe> </div> </script> </div> <div class="mt-3"> <div class="tags"> <a href="https://seongay.com/tags/CSS float" class="tag-link">CSS float</a> <a href="https://seongay.com/tags/Float-right Bootstrap" class="tag-link">Float-right Bootstrap</a> </div> </div> <div class="post-tools"> <button data-postid="the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page" class="btn btn-answerModalBox"><img class="mr-1" alt="The float property indicates in which direction to display an element being inserted on a web page." src="/dist/images/svg/messages_16.svg">Reply</button> <button data-postid="the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page" data-vote="up" class="btn btn-doVote"><img class="mr-1" alt="The float property indicates in which direction to display an element being inserted on a web page." src="/dist/images/svg/face-smile_16.svg">5</button> <button data-postid="the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page" data-vote="down" class="btn btn-doVote"><img class="mr-1" alt="The float property indicates in which direction to display an element being inserted on a web page." src="/dist/images/svg/poo_16.svg">0</button> <button class="btn"><img class="mr-1" alt="The float property indicates in which direction to display an element being inserted on a web page." src="/dist/images/svg/facebook_16.svg"> Chia sẻ</button> </div> </div> </div> </div> <div id="answers_the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page" class="answers"> </div> <div class="entryFooter"> <div class="footerLinkAds"><div style="width:100%; margin:0 auto;"> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8199996671"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="footerRelated"><div class="postRelatedWidget"> <h2>Bài Viết Liên Quan</h2> <div class="questions-snippet layoutNews border-top border-top-gray"> <div class="max-width:840px"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fb-44+c1-1p-ns" data-ad-client="ca-pub-4987931798153631" data-ad-slot="7655066491"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bien-phap-tu-tu-la-gi-tac-dung-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/AN9iv_CcHhI/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLC-ozw-bMtvdpNfj3thACKvAjBpLw" alt="Biện pháp tu từ là gì tác dụng năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bien-phap-tu-tu-la-gi-tac-dung-nam-2024">Biện pháp tu từ là gì tác dụng năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/dayi-halogen-duoc-xep-theo-tinh-oxi-hoa-giam-dan-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/uJX2-sWPXU8/hq720.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGAHwAQH4AY4CgALgA4oCDAgAEAEYMyBbKGUwDw==&rs=AOn4CLAEpeCWSpw6FWny4wbDzQKBcsQGlw" alt="Dãyi halogen được xếp theo tính oxi hóa giảm dần năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/dayi-halogen-duoc-xep-theo-tinh-oxi-hoa-giam-dan-nam-2024">Dãyi halogen được xếp theo tính oxi hóa giảm dần năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/loi-khong-vao-duoc-the-nho-tren-may-tinh-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/_NDAnbrUWK8/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDw8whWNoAnLjuOOg1HPOt-klJaTA" alt="Lỗi không vào được thẻ nhớ trên máy tính năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/loi-khong-vao-duoc-the-nho-tren-may-tinh-nam-2024">Lỗi không vào được thẻ nhớ trên máy tính năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Công Nghệ" class="tag-link">Công Nghệ</a> <a href="/tags/Máy tính" class="tag-link">Máy tính</a> <a href="/tags/Máy" class="tag-link">Máy</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/co-qua-co-lai-tieng-anh-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/RcLD8Q0CZ70/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBX1PqG0HVFEqO7M-K5UkhqVaXUtA" alt="Có qua có lại tiếng anh là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/co-qua-co-lai-tieng-anh-la-gi-nam-2024">Có qua có lại tiếng anh là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Tiếng anh" class="tag-link">Tiếng anh</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/chong-tuoi-ty-vo-tuoi-thin-sinh-con-nam-nao-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/zqGebJP2zwM/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDXhZeNQZrwYf8ccoJ2vk2P29tgAg" alt="Chồng tuổi tỵ vợ tuổi thìn sinh con năm nào năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/chong-tuoi-ty-vo-tuoi-thin-sinh-con-nam-nao-nam-2024">Chồng tuổi tỵ vợ tuổi thìn sinh con năm nào năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/chuc-nang-nfc-cua-dien-thoai-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/GuGi4ZZawuE/hqdefault.jpg?sqp=-oaymwE9COADEI4CSFryq4qpAy8IARUAAAAAGAElAADIQj0AgKJDeAHwAQH4AeABgALiAYoCDAgAEAEYEyArKH8wDw==&rs=AOn4CLABSYzylN87vYSwm1U7kHg18joC3g" alt="Chức năng nfc của điện thoại là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/chuc-nang-nfc-cua-dien-thoai-la-gi-nam-2024">Chức năng nfc của điện thoại là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cong-bo-danh-sach-kiem-toan-vien-donam-2023-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/JwJi1RtfOqU/hq720_2.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGADwAQH4AbYIgAKAD4oCDAgAEAEYUiBeKGUwDw==&rs=AOn4CLAG25dMrRoawA4OH8aDzcY6nDDS7Q" alt="Công bố danh sách kiểm toán viên đỗnăm 2023 năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cong-bo-danh-sach-kiem-toan-vien-donam-2023-nam-2024">Công bố danh sách kiểm toán viên đỗnăm 2023 năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Sách " class="tag-link">Sách </a> <a href="/tags/Top List" class="tag-link">Top List</a> <a href="/tags/Danh sách" class="tag-link">Danh sách</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/soan-van-9-cac-phuong-cham-hoai-thoai-tt-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/0Olax0EeExY/hq720.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGAHwAQH4AdQGgALgA4oCDAgAEAEYOSBQKHIwDw==&rs=AOn4CLBH-kBPDZH4SyjL5PYdJAxY5MkfFw" alt="Soạn văn 9 các phương châm hoại thoại tt năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/soan-van-9-cac-phuong-cham-hoai-thoai-tt-nam-2024">Soạn văn 9 các phương châm hoại thoại tt năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/chong-gia-vo-tre-la-tien-nghia-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/1KQImUWZ2vQ/hqdefault.jpg?sqp=-oaymwEjCOADEI4CSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDKSjnbK3o-AsznVoMdnAHl7qozlg" alt="Chồng già vợ trẻ là tiên nghĩa là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/chong-gia-vo-tre-la-tien-nghia-la-gi-nam-2024">Chồng già vợ trẻ là tiên nghĩa là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> <a href="/tags/Ngôn ngữ" class="tag-link">Ngôn ngữ</a> <a href="/tags/Nghĩa là gì" class="tag-link">Nghĩa là gì</a> <a href="/tags/Lấy chồng già" class="tag-link">Lấy chồng già</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/de-kiem-tra-1-tiet-mon-hoa-8-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/b9qXAUAPUv4/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCGzGtkf2QwrJpziq9GaYgLQl38fQ" alt="Đề kiểm tra 1 tiết môn hóa 8 năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/de-kiem-tra-1-tiet-mon-hoa-8-nam-2024">Đề kiểm tra 1 tiết môn hóa 8 năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div> <div class="max-width:840px"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fb-44+c1-1p-ns" data-ad-client="ca-pub-4987931798153631" data-ad-slot="7655066491"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/dong-va-nhom-cai-nao-dan-dien-tot-hon-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/Hw2LaH1xqL4/hqdefault.jpg?sqp=-oaymwEjCOADEI4CSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLBV8uaYU_HV2GKulyVBEZnIbADBXg" alt="Đồng và nhôm cái nào dẫn điện tốt hơn năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/dong-va-nhom-cai-nao-dan-dien-tot-hon-nam-2024">Đồng và nhôm cái nào dẫn điện tốt hơn năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Lõi đồng" class="tag-link">Lõi đồng</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/involve-sb-in-sth-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/EVFB7D241QA/hq720_2.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGADwAQH4AbYIgAKAD4oCDAgAEAEYTSBeKGUwDw==&rs=AOn4CLBLN939zG10i7iICaH3qeAx610Zig" alt="Involve sb in sth là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/involve-sb-in-sth-la-gi-nam-2024">Involve sb in sth là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> <a href="/tags/Involve là gì" class="tag-link">Involve là gì</a> <a href="/tags/involve + ing" class="tag-link">involve + ing</a> <a href="/tags/Involve in" class="tag-link">Involve in</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cac-bai-toan-hay-de-tu-duy-lap-trinh-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/xnFcC7l-hDI/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBqgFylCcgRewUy3yjLGPvjkKCbAg" alt="Các bài toán hay để tư duy lập trình năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cac-bai-toan-hay-de-tu-duy-lap-trinh-nam-2024">Các bài toán hay để tư duy lập trình năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Tư duy logic" class="tag-link">Tư duy logic</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bai-tap-hoc-ky-mon-luat-so-huu-tri-tue-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/9AIFjV80BME/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDpp_We48NqAq3n2SQPQgAYHctDnw" alt="Bài tập học kỳ môn luật sở hữu trí tuệ năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bai-tap-hoc-ky-mon-luat-so-huu-tri-tue-nam-2024">Bài tập học kỳ môn luật sở hữu trí tuệ năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Khỏe Đẹp" class="tag-link">Khỏe Đẹp</a> <a href="/tags/Bài tập" class="tag-link">Bài tập</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Học" class="tag-link">Học</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/mat-do-ca-the-cua-quan-the-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/CN2f5WU0Fvc/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLD80sopHkhETlk3aOFw4Y3sicRWHA" alt="Mật độ cá thể của quần thể là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/mat-do-ca-the-cua-quan-the-la-gi-nam-2024">Mật độ cá thể của quần thể là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/anh-van-bien-phien-dich-truong-dai-hoc-duy-tan-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/OXNTHpNy_A0/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBNhqKhV9nYb41mHIKNz0Vy28fkQg" alt="Anh văn bien phiên dịch trường dại học duy tân năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/anh-van-bien-phien-dich-truong-dai-hoc-duy-tan-nam-2024">Anh văn bien phiên dịch trường dại học duy tân năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Học" class="tag-link">Học</a> <a href="/tags/Ngôn ngữ" class="tag-link">Ngôn ngữ</a> <a href="/tags/Dịch " class="tag-link">Dịch </a> <a href="/tags/Biên dịch" class="tag-link">Biên dịch</a> <a href="/tags/myDTU" class="tag-link">myDTU</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/vo-bai-tap-toan-lop-5-bai-81-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/Mt5y6QAzH4Y/hq720.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGAHwAQH4Af4OgAK4CIoCDAgAEAEYVyBBKHIwDw==&rs=AOn4CLAGmJvwGa4pXBLUzXoobSy_LHEh9Q" alt="Vở bài tập toán lớp 5 bài 81 năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/vo-bai-tap-toan-lop-5-bai-81-nam-2024">Vở bài tập toán lớp 5 bài 81 năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Khỏe Đẹp" class="tag-link">Khỏe Đẹp</a> <a href="/tags/Bài tập" class="tag-link">Bài tập</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/khu-nha-o-tai-dinh-cu-tieng-anh-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/O7Lghtsdrh8/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAqaack976WcIV-J9jP3riR6ODMmQ" alt="Khu nhà ở tái định cư tiếng anh là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/khu-nha-o-tai-dinh-cu-tieng-anh-la-gi-nam-2024">Khu nhà ở tái định cư tiếng anh là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Tiếng anh" class="tag-link">Tiếng anh</a> <a href="/tags/Xây Đựng" class="tag-link">Xây Đựng</a> <a href="/tags/Nhà" class="tag-link">Nhà</a> <a href="/tags/Resettlement" class="tag-link">Resettlement</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bot-sat-co-cong-thuc-hoa-hoc-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/8yWitCypmSw/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAqD2yG_k2SGGYbfOgJD5IQ7UtlCw" alt="Bột sắt có công thức hóa học là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bot-sat-co-cong-thuc-hoa-hoc-la-gi-nam-2024">Bột sắt có công thức hóa học là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Học" class="tag-link">Học</a> <a href="/tags/Công thức" class="tag-link">Công thức</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bai-tap-giao-duc-cong-dan-9-bai-tap-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/QDvslHCC-7c/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCHYWfgfwtgJuBP4Kkd2ZrFP5_PLw" alt="Bài tập giáo dục công dân 9 bài tập năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bai-tap-giao-duc-cong-dan-9-bai-tap-nam-2024">Bài tập giáo dục công dân 9 bài tập năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Khỏe Đẹp" class="tag-link">Khỏe Đẹp</a> <a href="/tags/Bài tập" class="tag-link">Bài tập</a> <a href="/tags/GDCD 8" class="tag-link">GDCD 8</a> <a href="/tags/GDCD 12" class="tag-link">GDCD 12</a> <a href="/tags/Gdcd9 bài 14" class="tag-link">Gdcd9 bài 14</a> <a href="/tags/Gdcd9 bài 12" class="tag-link">Gdcd9 bài 12</a> <a href="/tags/Gdcd9 Bài 13" class="tag-link">Gdcd9 Bài 13</a> </div> </div> </div> </div> </div> </div></div> </div> </div> </div> </div> <div class="postContentRight"> <div class="sidebar"> <div class="ad-card"> <h4 class="text-gray text-uppercase fs-13 pb-3 text-center">Quảng Cáo</h4> <div class="mb-4 mx-auto" style="text-align:center"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8742637402" data-ad-format="auto" data-full-width-responsive="true"> </ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="card card-item"> <div class="card-body"> <h3 class="fs-17 pb-3">Có thể bạn quan tâm</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/giai-sach-toan-lop-4-trang-151-bai-luyen-tap-nam-2024">Giải sách toán lớp 4 trang 151 bài luyện tập năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/BigIgnition" class="author">BigIgnition</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/chan-sat-ong-nuoc-tieng-anh-la-gi-nam-2024">Chân sắt ống nước tiếng anh là gì năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/TerrifiedDugout" class="author">TerrifiedDugout</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/cac-van-ban-lien-quan-kiem-dinh-truong-tieu-hoccj-nam-2024">Các văn bản liên quan kiểm định trường tiểu hoccj năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/FuckingPanther" class="author">FuckingPanther</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/cong-ty-con-cua-tap-doan-hoa-chat-nam-2024">Cong ty con của tập đoàn hóa chất năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/BiasedAssociation" class="author">BiasedAssociation</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/giai-bai-37-sgk-toan-9-tap-1-trang-20-nam-2024">Giải bài 37 sgk toán 9 tập 1 trang 20 năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/ArchitecturalSerenity" class="author">ArchitecturalSerenity</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/cac-cau-hoi-trac-nghiem-ve-ke-toan-ban-hang-nam-2024">Các câu hỏi trắc nghiệm về kế toán bán hàng năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/FlimsyHamburger" class="author">FlimsyHamburger</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/loi-cai-dat-phan-mem-quyet-toan-thue-tncn-310-nam-2024">Lỗi cài đặt phần mềm quyết toán thuế tncn 3.1.0 năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/PainedSelf-respect" class="author">PainedSelf-respect</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/thac-si-viet-tat-tieng-anh-la-gi-nam-2024">Thạc sĩ viết tắt tiếng anh là gì năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/LousyPhosphorus" class="author">LousyPhosphorus</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/chuyen-vien-ho-tro-van-hanh-la-gi-nam-2024">Chuyên viên hỗ trợ vận hành là gì năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/InorganicScouring" class="author">InorganicScouring</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/de-thi-chuyen-ly-vao-lop-10-chu-van-an-nam-2024">Đề thi chuyên lý vào lớp 10 chu văn an năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/WithholdingInsurer" class="author">WithholdingInsurer</a> </small> </div> </div> </div> </div> </div> <div class="card card-item cardTopList"> <div class="card-body"> <h3 class="fs-17 pb-3">Toplist được quan tâm</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="topListNum">#1</div> <div class="media-body"> <h5><a href="https://seongay.com/toplist-top-8-bai-6-trang-38-sgk-toan-8-tap-2-2023">Top 8 bài 6 trang 38 sgk toán 8 tập 2 2023</a></h5> <small class="meta text-right">6 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#2</div> <div class="media-body"> <h5><a href="https://seongay.com/toplist-top-10-bai-1-trang-44-sgk-van-12-2023">Top 10 bài 1 (trang 44 sgk văn 12) 2023</a></h5> <small class="meta text-right">6 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#3</div> <div class="media-body"> <h5><a href="https://seongay.com/toplist-top-9-vo-bai-tap-tieng-viet-lop-4-tap-2-tuan-28-on-tap-giua-hoc-ki-2-tiet-2-2023">Top 9 vở bài tập tiếng việt lớp 4 tập 2 tuần 28 ôn tập giữa học kì 2 tiết 2 2023</a></h5> <small class="meta text-right">6 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#4</div> <div class="media-body"> <h5><a href="https://seongay.com/toplist-top-5-phuong-phap-giai-bai-tap-benzen-violet-2023">Top 5 phương pháp giải bài tập benzen violet 2023</a></h5> <small class="meta text-right">6 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#5</div> <div class="media-body"> <h5><a href="https://seongay.com/toplist-top-7-cau-truc-nao-cua-giun-dat-tien-hoa-hon-giun-dep-va-giun-tron-2023">Top 7 câu trúc nào của giun đất tiến hóa hơn giun dẹp và giun tròn 2023</a></h5> <small class="meta text-right">6 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#6</div> <div class="media-body"> <h5><a href="https://seongay.com/toplist-top-10-em-co-nhan-xet-gi-ve-am-dieu-nhip-dieu-cua-bai-tho-2023">Top 10 em có nhận xét gì về âm điệu nhịp điệu của bài thơ 2023</a></h5> <small class="meta text-right">6 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#7</div> <div class="media-body"> <h5><a href="https://seongay.com/toplist-top-4-vo-anh-tam-thien-dao-truyen-tranh-nettruyen-2023">Top 4 võ ánh tam thiên đạo truyện tranh nettruyen 2023</a></h5> <small class="meta text-right">6 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#8</div> <div class="media-body"> <h5><a href="https://seongay.com/toplist-top-5-phim-phap-y-tan-minh-loi-khai-cam-lang-full-2023">Top 5 phim pháp y tần minh - lời khai câm lặng full 2023</a></h5> <small class="meta text-right">6 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#9</div> <div class="media-body"> <h5><a href="https://seongay.com/toplist-top-7-nguoi-ta-tac-dung-mot-luc-2n-vao-mot-lo-xo-thi-no-bi-bien-dang-2cm-do-cung-cua-lo-xo-la-2023">Top 7 người ta tác dụng một lực 2n vào một lò xo thì nó bị biến dạng 2cm độ cứng của lò xo là 2023</a></h5> <small class="meta text-right">6 tháng trước</small> </div> </div> </div> </div> </div> <div class="ad-card"> <h4 class="text-gray text-uppercase fs-14 pb-3 pb-3 text-center">Quảng cáo</h4> <div class="mb-4 mx-auto"> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-" data-ad-slot="" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="card card-item"> <div class="card-body"> <h3 class="fs-17 pb-3">Xem Nhiều</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/top-nhung-nuoc-co-dong-tien-thap-nhat-the-gioi-nam-2024">Top những nước có đồng tiền thấp nhất thế giới năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/OffhandScouring" class="author">OffhandScouring</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/giai-ngoai-hang-anh-tieng-anh-la-gi-nam-2024">Giải ngoại hạng anh tiếng anh là gì năm 2024</a></h5> <small class="meta"> <span class="pr-1">4 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/AccessibleMeasurement" class="author">AccessibleMeasurement</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/cong-bo-danh-sach-kiem-toan-vien-donam-2023-nam-2024">Công bố danh sách kiểm toán viên đỗnăm 2023 năm 2024</a></h5> <small class="meta"> <span class="pr-1">5 giờ trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/LucidNervousness" class="author">LucidNervousness</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/dinh-muc-trong-xuat-nhap-khau-la-gi-tieng-anh-nam-2024">Định mức trong xuất nhập khẩu là gì tiếng anh năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 tuần trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/FelinePasta" class="author">FelinePasta</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/lam-bai-tap-ngu-phap-tieng-anh-online-nam-2024">Làm bài tập ngữ pháp tiếng anh online năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/SurrealFertilization" class="author">SurrealFertilization</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/cac-bai-tap-giup-canh-tay-thon-gon-nam-2024">Các bài tập giúp cánh tay thon gọn năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/VisionaryCivility" class="author">VisionaryCivility</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/khac-phuc-loi-latop-khong-ket-noi-may-chieu-nam-2024">Khắc phục lỗi latop không kết nối máy chiếu năm 2024</a></h5> <small class="meta"> <span class="pr-1">4 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/GuidingContractor" class="author">GuidingContractor</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/doanh-nghiep-noi-ve-hoa-don-dien-tu-nam-2024">Doanh nghiệp nói về hóa đơn điện tử năm 2024</a></h5> <small class="meta"> <span class="pr-1">6 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/LacyRendition" class="author">LacyRendition</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/giai-bai-tap-toan-8-bai-11-sgk-trang-29-nam-2024">Giải bài tập toán 8 bài 11 sgk trang 29 năm 2024</a></h5> <small class="meta"> <span class="pr-1">4 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/PutativeBiography" class="author">PutativeBiography</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://seongay.com/bai-tap-dai-luong-ngau-nhien-lien-tuc-nam-2024">Bài tập đại lương ngẫu nhiên liên tục năm 2024</a></h5> <small class="meta"> <span class="pr-1">6 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://seongay.com/author/NovelNutrition" class="author">NovelNutrition</a> </small> </div> </div> </div> </div> </div> <div class="ad-card"> <h4 class="text-gray text-uppercase fs-14 pb-3 pb-3 text-center">Quảng cáo</h4> <div class="mb-4 mx-auto" style=" text-align: center"> <div id='div-gpt-ad-1657246837997-0' style='min-width: 300px; min-height: 600px;'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1657246837997-0'); }); </script> </div> </div> </div> </div> </div> </div> </div> </section>  <script>var questionId ='the-float-property-indicates-in-which-direction-to-display-an-element-being-inserted-on-a-web-page'</script> <script>var postTime ='2022-10-04T01:09:20.432Z'</script> <script>var siteDomain ='seongay.com'</script> <script type="text/javascript" src="https://seongay.com/dist/js/pages/comment.js"></script>  <section class="footer-area pt-80px bg-dark position-relative"> <span class="vertical-bar-shape vertical-bar-shape-1"></span> <span class="vertical-bar-shape vertical-bar-shape-2"></span> <span class="vertical-bar-shape vertical-bar-shape-3"></span> <span class="vertical-bar-shape vertical-bar-shape-4"></span> <div class="container"> <div class="row"> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Chúng tôi</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/about.html">Giới thiệu</a></li> <li><a href="/contact.html">Liên hệ</a></li> <li><a href="/contact.html">Tuyển dụng</a></li> <li><a href="/contact.html">Quảng cáo</a></li> </ul> </div> </div> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Điều khoản</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/privacy-statement.html">Điều khoản hoạt động</a></li> <li><a href="/terms-and-conditions.html">Điều kiện tham gia</a></li> <li><a href="/privacy-statement.html">Quy định cookie</a></li> </ul> </div> </div> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Trợ giúp</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/contact.html">Hướng dẫn</a></li> <li><a href="/contact.html">Loại bỏ câu hỏi</a></li> <li><a href="/contact.html">Liên hệ</a></li> </ul> </div> </div> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Mạng xã hội</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="#"><i class="fab fa-facebook-f mr-1"></i> Facebook</a></li> <li><a href="#"><i class="fab fa-twitter mr-1"></i> Twitter</a></li> <li><a href="#"><i class="fab fa-linkedin mr-1"></i> LinkedIn</a></li> <li><a href="#"><i class="fab fa-instagram mr-1"></i> Instagram</a></li> </ul> </div> </div> </div> </div> <hr class="border-top-gray my-5"> <div class="container"> <div class="row align-items-center pb-4 copyright-wrap"> <div class="col-6"> <a href="//www.dmca.com/Protection/Status.aspx?ID=33e5dca6-f8c5-4c6f-b8e6-a247229d2953" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="https://images.dmca.com/Badges/dmca_protected_sml_120am.png?ID=33e5dca6-f8c5-4c6f-b8e6-a247229d2953" width="123px" height="21px" alt="DMCA.com Protection Status" /></a> <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script> </div> <div class="col-6"> <div class="copyright-desc text-right fs-14"> <div>Bản quyền © 2021 <a href="https://seongay.com">seongay.com</a> Inc.</div> </div> </div> </div> </div> </section> <script> $( document ).ready(function() { setTimeout(showMoreButton, 3000); function showMoreButton(){ let minheight = 1000; minheight = parseInt($("#entryContent").innerHeight())/3; $("#entryContent").css('min-height', minheight).css('max-height', minheight).css('overflow', 'hidden'); $("#readmore_content").click(function(){ $("#entryContent").css('min-height', '').css('max-height', '').css('overflow', ''); $(".readmore_content_exists").css('display', 'none'); }) } }); </script>   <div id="back-to-top" data-toggle="tooltip" data-placement="top" title="Lên đầu trang"> <img alt="" src="/dist/images/svg/arrow-up_20.svg"> </div>  <script src="https://seongay.com/dist/js/bootstrap.bundle.min.js"></script> <script src="https://seongay.com/dist/js/moment.js"></script> <script src="https://seongay.com/dist/js/read-more.min.js"></script> <script src="https://seongay.com/dist/js/main.js?v=6"></script>  <script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "jxuz46z39u"); </script> </body> </html>