here's the image
Like showing in this image I want to pack divs inside short eats div. For example, the fish bun div can put beside chinese rolls div likewise. I just want no white space there. Those divs are dynamically appear though.
I've added my laravel view code below if you need.
<div class="col-md-4 border border-primary rounded">
<h4>Short Eats</h4>
#foreach($shorteats as $shrt)
<div>
{{$shrt->dish_name}}
</div>
#endforeach
</div>
<div class="col-md-4 border border-primary rounded">
<h4>Rice</h4>
#foreach($rice as $ric)
<div>
{{$ric->dish_name}}
</div>
#endforeach
</div>
You can add a class (e.g. .menu-container) to your <div>, that is the parent of your anchor tag, and use flexbox to (hopefully) achieve what you're after:
HTML:
<div class="menu-container">
{{$ric->dish_name}}
</div>
CSS:
.menu-container {
display: flex;
flex-wrap: wrap;
}
.food-item {
// styles for your anchor tag go here
}
Related
I am using TailwindCSS and have a nested HTML structure like so:
<div class="my-4">
<div class="my-4">
<!-- Some Content -->
</div>
</div>
What I don't understand is why the inner div is placed in such a way that its border aligns with the border of the outer div and the margins which I applied overlap. However, I noticed that when I add a border around the outer div, the margins suddenly behave how i would expect: the outer div contains the elements including margins.
Here is a jsfiddle to illustrate my point: https://jsfiddle.net/1vptz5fc/
How can I get the divs to behave like they do with borders, just without adding a border?
Is would say you should use the padding py that will fix it , look:
.test {
border: 1px solid red;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class=" my-4 bg-green-500 py-1" id="parent">
<div class="my-4">
with py
</div>
<div class="my-4">
Other Content
</div>
</div>
<button type="button" onclick="document.getElementById('parent').style.border = 'none';">
Click Me
</button>
<div class="test my-4 bg-green-500" id="parent">
<div class="my-4">
with border
</div>
<div class="my-4">
Other Content
</div>
</div>
<button type="button" onclick="document.getElementById('parent').style.border = 'none';">
Click Me
</button>
It seems like it's the default behaviour if there's no element between parent and child.
Margin collapsing occurs in three basic cases:
Adjacent siblings
No content separating parent and descendants
Empty blocks
There's a stackoverflow thread that might help you:
How to disable margin-collapsing?
More information on margin collapse:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
You can probably add display: inline-block; to get the expected results regarding the margin but you will have to adjust with other styles.
I am trying to figure out how to get p tags within a div to pop up side by side and display somewhat like a table, but using flex instead of any floats.
<div class="summary">
<img src="life.jpg" alt="Life's great">
<div>
<div>
<p>Chapter 1:</p>
<p>0-10</p>
</div>
<div>
<p>Chapter 2:</p>
<p>11-20</p>
</div>
<div>
<p>Chapter 3:</p>
<p>21-30</p>
</div>
</div>
</div>
So the output should look something along these lines, except I will have borders and such to design a box around it. I have to use flex which is throwing me off.
Chapter 1: 0-10
Chapter 2: 11-20
Chapter 3: 21-30
Should just be as easy as applying display: flex on the container you want to have flex-laid out children within and giving a little margin. The snippet below lays out the markup in the manner you showed in your question. It uses terrible selectors, but I didn't want to change your HTML structure at all. However, I'd recommend putting classes on elements you wish to target so that you can avoid using element names as selectors.
.summary > div > div {
display: flex;
}
.summary > div > div > p:first-child {
margin-right: 10px;
}
<div class="summary">
<img src="life.jpg" alt="Life's great">
<div>
<div>
<p>Chapter 1:</p>
<p>0-10</p>
</div>
<div>
<p>Chapter 2:</p>
<p>11-20</p>
</div>
<div>
<p>Chapter 3:</p>
<p>21-30</p>
</div>
</div>
</div>
I'm using the Bootstrap 3 grid to hide/show nav bar content based on whether or not the user is using an extra small device.
I'm using .hidden-xs and .visible-xs classes. These classes appropriately hide/show the content, but I'm running into two problems:
(1) Hiding the content also shrinks the column spacing by .col-xs-5 because the div is hidden. I tried adding .visible-xs to a subsequent div and using .col-xs-5 to make up the empty space. This works, but only if I place content inside the divs. I just want the columns to be spaced out.
(2) On XS view size, the final item on the Nav bar "Nav" jumps to the next row. I have only accounted for 12 total columns.
See this JSFiddle. I'm trying to nly show "Welcome" on large view and show nothing on XS view.
I here's an idea, you can try instead of adding content. This CSS trick uses :before and :after CSS pseudo-classes.
.no_content {
display: block;
content: "";
width: 151px;
height: 35px;
background: transparent url(tape.png) 0 0 no-repeat;
}
<div class="no_content"></div>
I would look at the grid system further. I believe there is an offset that you can use to offset the div like this:
<div class="row">
<div class="col-xs-5 col-xs-offset-5></div>
<div class="col-xs-2></div>
</div>
Use the pull-right bootstrap class instead of trying to make empty div's fill in the space.
Completely remove the div you added in item (1) to "make up the space". On the div containing "Nav" set the class as pull-right col-xs-1. So the code from your JSFiddle becomes:
<div class="container">
<div class="row" id="header">
<div class="col-xs-5" id="brand-wrapper">
<div class="brand">Brand</div>
</div>
<!-- Hidden on XS Devices -->
<div class="hidden-xs col-xs-5">
<p>
Welcome
</p>
</div>
<!-- Nav -->
<div class="pull-right col-xs-1" id="toggle-wrapper">
<p>Nav</p>
</div>
</div>
</div>
I have a parent element that has Bootstrap 3's .row CSS class. Within this element are two child elements (each with a Bootstrap column class), one of which has a varying height depending on the data populating it. In the design I'm working with, the elements in this row need to be anchored to the bottom of the parent element.
The kicker (as the title and use of bootstrap suggests) is that this needs to be responsive. Thus absolute positioning of the child elements with bottom: 0px; is not an option.
Here's the current structure of the html:
<div class="row r4">
<div class="col-md-2">
<div class="bottom">
<div data-bind="text: description()"></div>
<span data-bind="text: metric()"></span>
</div>
</div>
<div class="col-md-8">
<div class="bottom">
<div data-bind="foreach: keyLabels()">
<div class="key-color">
<div data-bind="attr: {class: color + ' color-value'}"></div>
<div data-bind="text: label"></div>
</div>
</div>
</div>
</div>
</div>
I've done some research and haven't found a reliable method of solving this using a pure HTML/CSS solution.
I can think of a number of fairly straight-forward (albeit hacky) ways to solve this with JS, but for now I'd like to avoid that with possible.
Any ideas?
Here's a simplified version of your markup that helps more easily reproduce the issue:
<div class="row">
<div class="col-xs-2 pull-bottom"
style="height:100px;background:blue">
</div>
<div class="col-xs-8 pull-bottom"
style="height:50px;background:yellow">
</div>
</div>
So how do we vertically align each column to the bottom? See vertical-align with bootstrap 3:
.pull-bottom {
display: inline-block;
vertical-align: bottom;
float: none;
}
Working Demo in jsFiddle
My problem can be better understood by the image below.
I have several div elements (div A) which have a variable size that depends on their content.
They are displayed inblock inside a larger container with a max-with defined(the large outer rectangle without a name).
Everything works fine until I had inside divs A two other divs (B and C) which I what that look like the image.
I haven´t been successful. I've tried several combinations of css properties like display, margin, padding, float... negative margins... tables...
Any help would be welcome.
Update
the code looks like the example:
html
<div style="max-width: 800px;">
<div class="div_a">
<div class="div_b">
short text
</div>
<div class="div_c">
short text
</div>
</div>
<div class="div_a">
<div class="div_b">
looooong text
</div>
<div class="div_c">
looooong text
</div>
</div>
<div class="div_a">
<div class="div_b">
huuuuuge text
</div>
<div class="div_c">
huuuuuge text
</div>
</div>
</div>
css
.div_a{
display: inline;
}
.div_b{
display: block; /* doesn't work*/
}
.div_c{
display: block; /* doesn't work*/
}
If I understand correctly, this should do it:
.div_a{
display: inline-block;
}
:)
...assuming you don't have other styles, besides border and spacing properties.
A fiddle example here