When the <dd> tag is present in a Definition List, divide it into multiple columns. If

Can anyone help me with a solution to split a list similar to the following into multiple columns without breaking it into separate definition lists?

<dl>
    <dt>Title of Column 1</dt>
    <dd>data for col 1</dd>
    <dd>data for col 1</dd>
    <dt>Title of Column 2</dt>
    <dd>data for col 2</dd>
    <dt>Title of Column 3</dt>
    <dt>Title of Column 4</dt>
</dl>

The challenge is that there may or may not be dd elements, making it difficult to predict the exact number of items. I considered using nth-child, but that would require knowing the quantity in advance. Is there an alternative approach to achieve this?

Your suggestions are greatly appreciated.

jquerycss

Answer №1

If your browser supports it, you can achieve the desired layout using CSS Columns and setting the break-before style on the dt tag.

To implement this in your HTML code, you can use the following CSS:

dl {
  column-count: 4;
  background: #ddd;
  height: 300px;
}

dt {
  -webkit-column-break-before: always;
  break-before: column;
}

Make sure the height of each column is sufficient to accommodate both the header and data content within.

For more information on browser support, visit: https://developer.mozilla.org/en-US/docs/Web/CSS/break-before (IE 10+ and Opera are supported, while Chrome and Safari may require a browser prefix. Firefox does not support this feature).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the class name from a CSS stylesheet

How can I extract all the CSS class names from a CSS file? This is what my CSS file looks like: p.juicy{ margin-left:40px; } p.csBody{ text-align:justify; } p.csCode{ font-family:"Lucida Console", Monaco, monospace; background-color:sil ...

c#css.netwinforms

What is the best way to include key-value pairs in a jQuery array?

I am facing an issue with a group of checkboxes. I need to add the values of these checkboxes, each containing a pair of numbers, to an array and then use them. However, the problem is that the array only takes the value of the last checkbox. Despite my ef ...

jqueryarraysforms

Encountered a network error 500 when attempting to access a CodeIgniter controller action through Ajax

I am facing an issue with my admin controller. Within this controller, I have a processReq function that is triggered by a button click event. However, every time I click the button, I encounter an error message: "NetworkError: 500 Internal Server Error ...

phpjqueryajaxcodeigniter

Replace the single text area with multiple div elements and update the image within each div

Within the 'Pinctitle' area, there is text that I want to change each time a Pselectorbutton is hovered over with a fading effect. Additionally, I would like the image inside the 'Pselectorbutton' to change at the same time. Currently, ...

jqueryhtmlcss

Writing a function to determine if an HTML element is present

Is there a way to create a function that checks for the existence of an element with a specific id? I have a list of IDs stored in an array: let CartArray = ["cart-0", "cart-1", "cart-2", "cart-3"]; This is the Java ...

javascripthtmljquery

Phrases are truncated in the initial line of each ion-item within the ion-list

In Ionic 3, I am facing an issue with my ion-list where the first line inside each ion-item is getting cut off. Specifically, the capital 'A' letter is not entirely visible. Can anyone provide assistance with this? Thank you. Below is my code sn ...

cssionic-framework

Incorrect rendering on mobile screen width

I am facing an issue where my div does not display as 100% width in the mobile version. Below is the JSX code I am using: <div> <div expand="lg" className="login-header"> <h1>logo</h1> <h1&g ...

htmlcssmobileviewportmeta

Guide to generating an iframe that is triggered by a button click with the help of jquery

Is it possible to dynamically insert an iframe into a column div on a web page by clicking on it? I want the iframe to remain hidden when just viewing the page, but to become visible when a button is clicked. How can this be achieved? ...

javascriptjqueryhtmliframe

What is the best way to fill in columns with data, adding one entry per column each time and repeating the process in a loop?

I am looking to display multiple posts on a page within 3 columns: column 1 | column 2 | column 3 | The desired outcome is: column 1 | column 2 | column 3 | post1 post2 post3 post4 post5 post6 ... For instance, the HTML code appe ...

phpjqueryhtmlforeachmultiple-columns

Internet Explorer experiencing problems with JSON when using ajax请求

After struggling with this issue for a significant amount of time, I have decided to seek help from the community. I am utilizing Google Custom Search REST API in combination with jQuery to retrieve results and display them in the browser. The problem I a ...

jqueryajaxjsoninternet-explorergoogle-custom-search

Getting rid of excess space surrounding text

Within my div, I am attempting to create a 5px padding around the text; however, there seems to be additional spacing that is interfering with my desired layout. It almost feels as though my browser is mocking my efforts by refusing to cooperate. This is ...

css

If the handler of an event listener in jQuery requires a callback function, be sure to detach the event

Currently, I am facing a dilemma with a listener I have: $(document).on("keypress", function(e){ebClose(e,mpClose)}); I am exploring ways to dynamically delete this listener. The issue lies in the fact that I specifically want ebClose to receive mpClose ...

javascriptjquery

Getting the dimensions of an image using a path in JavaScript

I am trying to display a div with an image, its name, size, and download link using jQuery. Here is the code I have created: var image = 'image/example.png' $('#download').attr("href", result2); $('.image').attr("src", re ...

javascriptjqueryhtmlimage

The JavaScript file is not compatible with Internet Explorer 9

My website's JavaScript functions normally work on all browsers except for Internet Explorer 9. In IE7 and IE8, they also work normally. After extensive testing, I have concluded that the JS file simply does not work in IE9, but why is that? The curio ...

javascriptjquery

Trying out basic form validation - Adjusting border color for an empty input

Currently, I am experimenting with a basic login form using PHP and testing it out on XAMPP in Chrome. Below is the code for the login form: <form action="login.php" method="POST"> <label>User: </label> <i ...

phpcssinputcolors

Tips for updating a link's href using its text content

I need help with replacing the login link in a text, but only if it says "Log In". Occasionally it will say "My Account": <div id="Login_T4304F19B025"> <a href="/login1">Log in</a> </div> Is there a way to use jQuery to update ...

jquery

Automated Recommendation Selector

I'm searching for a JavaScript library that can provide the following functionalities: An auto-suggest dropdown list that uses Ajax to retrieve results from a database. Restricting the user to only select values provided by the Ajax call. Abilit ...

javascriptajaxjqueryautocompleteautosuggest

The animation for the CSS gradient background is failing to animate

After finding a similar code snippet used for backgrounds, I made some modifications to suit my needs. However, when attempting to implement it or any animation, nothing seems to be working. Even simple animations are not functioning as expected. While I a ...

javascripthtmlcss

Prevent Material UI Chips from altering color upon activation

Chip number 3 in the image below appears with a slightly darker background color when clicked, but this change is unnecessary as only the delete button has functionality. Therefore, the change in color serves no purpose. How do I prevent the background co ...

cssreactjsmaterial-ui

Styling elements in CSS to position the form button outside of the table enclosed within the form

I'm attempting to position a form button outside the table shown below, using float or another method: <form action="./deleteentry.php" method="post"> <?php foreach ($dbr as $var) { ?> <tr> ...

htmlcss