Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 months ago.
Improve this question
I am currently making a page with flexboxes, and when it comes to adding text areas, I wonder if I should make a new container for each text area or is it not the way to do ?
Let's say I have the following code for my page:
<div class="flex-container">
</div>
Should I do this :
<div class="flex-container">
<div class="containertextarea1">
<p> text area 1 </p>
</div>
<div class="containertextarea2">
<p> text area 2 </p>
</div>
<div class="containertextarea3">
<p> text area 3 </p>
</div>
</div>
Or something else?
Thank you
If you need columns in your flex-container you can use flexbox. I mean something like this. from your code I think you can use directly in flexbox. that will reduce DOM size.
Here is the CSSTrix Link for a better understanding of FlexBox
As we know flexbox is a one-dimensional layout model, then until and unless you don't want these text areas to be spread in two dimensions(like in both column and row) then I think putting all text areas in one container is fine.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 months ago.
Improve this question
I'd like to make my text align from the bottom of the img.
Like below :
Do somebody knows how to make that trick ?
Use flexblox on the wrapping element, and you can then justify/align the items as needed.
<div style="display:flex;align-items:end;">
<div style="width:100px;height:100px;background-color:gray">Replace this div with image tag</div>
<span>Text text text</span>
</div>
Click here to see codepen example.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 months ago.
Improve this question
Does the properties/style of div class A overlap B in the below case?
<div class="A">
<div class="B">
</div>
</div>
Your question is not clear enough but most of the times, properties can 'overlap' or are inherited.
For eg., if we add a text in the div with class 'B' and add a CSS styling for the text to the div with class 'A', you will be able to see that the styling for the text is changed. Although, if you provide styles to the second div also, it would be considered for the styling of the text.
Please provide further context so I can help better.
.A {
color: blue;
}
<div class="A">
<div class="B">
this is a text
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How can I keep this two words on a single line:
<div align=right>hai</div>
<div align=center>hello</div>
I have already tried it but I didn't get any satisfactory preview.
Divs are block elements by default so they will appear on separate lines.
You can set them to inline by css: display:inline
Or use an inline element like or
<span align=right>hai</span>
<span align=center>hello</span>
I'm not sure I correcctly understand your question, but I'll try an answer anyway.
Let's say you have 2 words in a sentance :
<p>word1 word2</p>
and you want this 2 words to be, at any resolution, displayed beside each other.
Replace the space between this 2 words by (code for non-breaking space in HTML), and it will be displayed as a single entity :
<p>word1 word2</p>
If you wanted only DIV tag
Simply, use display:inline-block with DIV tag.
div {
display: inline-block;
}
<div align=right>hai</div>
<div align=center>hello</div>
Update
You can even use style attribute like below:
<div style="display:inline-block">hai</div>
<div style="display:inline-block">hello</div>
But, it's not a good practice...
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I have a requirement where a I need to display two divs side by side .This is the basic requirement where I need to build on
many functionalities going further.
I am able to achieve this in two approaches:
Approach 1:
<div id="id1" style="width:100%">
<div id="id2" style="width:100px;color:#0000FF;display:inline-block;border-color: red;border-style: solid;">
<p>This is some text in a div1 element.</p>
</div>
<div id="id3" style="width:100px;display:block;display:inline-block;border-color:blue;border-color: blue;border-style: solid;">
<p>This is some text in a div2 element.</p>
</div>
</div>
Approach 2:
<div id="id1" style="width:100%">
<div id="id2" style="width:100px;color:#0000FF;float:left;border-color: red;border-style: solid;">
<p>This is some text in a div1 element.</p>
</div>
<div id="id3" style="width:100px;display:block;float:left;border-color:blue;border-color: blue;border-style: solid;">
<p>This is some text in a div2 element.</p>
</div>
</div>
Which approach is the better one?
Is it float:left ? display:inline-block? My ultimate aim will be to make divs responsive as well in the future.Thats the reason wanted to know which one is better
Also, why is there space created between the divs when display:inline-block is used?
One advantage of using inline blocks is that you can center them horzontally using `text-align: center;' on the container element.
The space you write about is due to whitespace resulting from using line-breaks in the code.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I have the following layout. I can't use navbar, so instead I used the Grid system and gave it background.
How can I make this layout responsive? How can I leave spaces between the divs inside my container (e.g. searchbox)? Are there any helper classes in the Bootstrap framework that allow me to achieve this?
You can add margin to the <div> tags inside a container or row, but Bootstrap was designed for responsive web apps. So unless you come up with a way of defining your margins not as literalls, but based upon the screen size, it won't be as reponsive as you might wish it to be. Also, please avoid altering the margin of something with the class container, row or col
My recommendation. On the div with col-lg-7 or whatever the number might be, include another row, so that you can organize the layout in whatever way you need. If you want to leave a certain space betweeen elements, use 'col-lg-offset-x' according to your needs; with 'x' being the amount of spaces you want between elements. This will too sum up to 12.
Let me give you an example
<div class="row">
<div class="col-lg-2">
<!--Whatever you want to include here-->
</div>
<div class="col-lg-3">
<!--Whatever you want to include here-->
</div>
<div class="col-lg-7">
<div class="row">
<div class="col-lg-offset-2 col-lg-4">
<!--Whatever you want to include here-->
</div>
<div class="col-lg-offset-1 col-lg-5">
<!--Whatever you want to include here-->
</div>
</div>
</div>
</div>
You will need to add the col-md-x, col-sm-x and col-xs-x classes to fit your needs.
I hope it helps.