Currently, I am working on a design that involves organizing several <DIV> elements in a vertical manner while still maintaining responsiveness.
Here are some examples:
I have tried using floats, inline-block display, and even attempted to piece it together with jQuery, but all the elements end up being organized horizontally.
After searching around, I have not been able to find others facing the same issue or solutions, so any help would be greatly appreciated.
If you're not too worried about compatibility across different browsers (and just want to enhance the appearance in modern browsers), or if you're willing to use a JavaScript shim to add support for other browsers, you can utilize column-width to set the width of columns and let the browser adjust them to fit the content:
.gridbox {
display: block;
-webkit-column-width: 4em;
-moz-column-width: 4em;
-o-column-width: 4em;
-ms-column-width: 4em;
column-width: 4em;
/* custom styling goes here,
only the column-width is necessary */
margin: 1em auto;
padding: 1em;
border: 1px solid #f90;
border-radius: 1em;
}
In the demo, I used li and ul elements, but this approach can be applied to div elements as well. Just style the parent/container like the ul element above, and customize the child elements according to your preferences.
Want more information? Check out these references:
If you want to restructure your HTML, you'll need to create sub-containers within your main container to organize your content. Here's an example:
// Example 1
<div id="main">
<div class="group2">
<span>1</span>
<span>2</span>
</div>
...
</div>
// Example 2
<div id="main">
<div class="group3">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
...
</div>
To achieve the desired effect, you can use CSS to limit the width of the group containers.
Looking for a solution to update an Excel spreadsheet monthly and display it on a Blackberry browser? I've already built a website with all the spreadsheet information using HTML lists and CSS for charts. I need help loading a new spreadsheet into th ...
My request is not receiving a cookie even after trying various solutions like withCredentials. I have pasted the most recent code here, can anyone spot what might be missing? var cookie_for_data = "token=test"; var host = "http://localh ...
When you wish to navigate by scrolling with the middle mouse button instead of using the scroll wheel, simply middle-click and your cursor will change allowing for easy scrolling on web pages. Even though I am utilizing style="cursor: pointer" and @click. ...
Check out my Fiddle demonstration here $('select#classes').on('change', function() { var selectedClass = $(this).val(); $('.col-sm-6:not(:contains(' + selectedClass + '))').hide(); $('select#subjec ...
$(function() { "use strict"; $(".navbar-toggler").on("click", function() { $(".navbar-toggler").toggleClass("collapsed"); $(".offcanvas-collapse").toggleClass("open"); let menuposition = $("#toggler").offset().left + $("#toggler").width() + ...
I'm encountering an issue while creating interactive exercises. I want to display correct or incorrect answers immediately after submission using JSON for retrieving responses, as suggested in a forum. However, my AJAX code isn't working at all. ...
As a newcomer to React Native, I am facing an issue with refreshing the component to load city names stored in async storage. The error occurs when I utilize the FlatList component for the first time. The specific error message I encountered is: SyntaxE ...
Is there a way to show or hide information of an image in a separate div by clicking on the image itself? $(document).ready(function () { $(".cell").click(function () { $(this).find("span").toggle("slow"); }) }); <div class="cell"> ...
Currently, I have a series of images in constant motion using jCarousel. Only one image is visible fully at any given time, and I am looking to create a "feathering" effect on the edges of the carousel so that the images smoothly fade in and out as they co ...
I'm currently faced with a unique challenge involving the creation of around 200 canvases, each showcasing an image captured from the user's webcam as part of an experimentation process for the "photo finish" technique. My task now is to export ...
Looking to develop a Twitter bot utilizing the Twitter and Spotify APIs. Making progress, but encountered an issue I can't tackle alone: Seeking the artist and song name of the top 1 track from the top 50 Spotify songs. Upon sending a request to the ...
Given two arrays, I am looking to identify the elements in array2 that match elements in array1 based on a specific property. The arrays are structured as follows: var array1 = [ {"myId": 1, "text": "a"}, {"myId& ...
I recently created a bar chart using react.js and I need to find a way to enable horizontal scrolling on the x-axis as the number of values increases. The chart below displays daily search values inputted by users. With over 100 days worth of data already, ...
Attempting to dynamically change the text color and background color based on user input in the textbox. While it initially works, the color changes only flash for a brief moment before reverting back. <!DOCTYPE html> <html> <head> ...
Seeking assistance with swapping table rows using JQuery UI. Although successful in the swap, struggling to retrieve row numbers during the drag and drop event. Understanding the row number is essential for subsequent tasks. Any help would be greatly appre ...
Having an issue with the jQuery file (jquery-1.11.3.min.js) loading multiple times. It seems that other jQuery files in the index.html page might be causing this. Any advice on how to resolve this would be greatly appreciated. <script type="text/javasc ...
I am currently working on a project that involves displaying a series of resources on a web page. Each resource is stored as a record in a database with two fields: "url" and "visited." One issue I have encountered is that when a user clicks on a resource ...
I am struggling to change the background color of a circle in an SVG image on my HTML page using Thymeleaf. I attempted to use inline style tags, but it resulted in the circle's background color turning black. <svg id="svg" height="50" width=" ...
Utilizing express with cookieParser() where my client possesses the cookie named: App.Debug.SourceMaps. I've crafted a middleware as follows: app.get('/embed/*/scripts/bundle-*.js', function(req, res, next) { if (req.cookies['App ...
A few days ago, I posted a query on Stack Overflow regarding session data displaying the URL of a previous picture at Session data displaying url of previous picture Although it is currently functioning properly, I am wondering if there is a way to call m ...