I want to display "cards" in a line (for ex. 4 cards on each line). Each card is a div that contains a title (a span). My main problem is that the height of the title will change regarding the number of lines required to display the whole title.
So if I have a title that needs 2 lines to be displayed, the cards that contains itself will be shifted compared to the ones where the title can be displayed in only one line.
In such case, I get something like that:
+-----+
+-----+ | ABC | +-----+
| ABC | | DEF | | ABC |
+-----+ +-----+ +-----+
| | | | | |
| | +-----+ | |
+-----+ +-----+
Here is a live demo: http://plnkr.co/edit/eO9MwDyhFQg3BriMjikJ?p=preview
How can I solve that, i.e. I want all the cards to have the same height, and of course perfectly aligned.
Thanks
Just add vertical-align on the class title for spans:
.title {
vertical-align:top;
}
For default is baseline that makes the span align change based on the lenght of another baseline text inline-block elements.
You can also add this to the xxx class and works
Check this Demo http://plnkr.co/edit/X8vmBasqq3lZslMylSjI?p=preview
is this what you mean?
i have replaced display inline block with float left
http://plnkr.co/edit/xvP2ElSyEV1oXHSkV4Fb?p=preview
Related
I have an HTML table with a column of cells containing two parts e.g.
| Cat (meow) |
+---------------------------+
| Long-dinosaur-name (roar) |
There are also other columns not shown. My users' browsers have unknown widths. On a wide one, I wish to show the cell as one line, as above. If it gets too narrow, I'm fine with wrapping
| Cat |
| (meow) |
+----------+
| Long- |
| dinosaur-|
| name |
| (roar) |
but if one line wraps, all lines must also wrap:
| Cat |
| (meow) |
+---------------------+
| Long-dinosaur-name |
| (roar) |
Without using Javascript, is it possible to do this?
I know I can use <td nowrap> to prevent wrapping, or <br> to force a wrap, but how can I make one cell depend on another?
Try using media query(CSS) with breakpoints. I know you said, the user browsers width's are unknown, but you can anticipate for different width's etc
I have a table that has three td's. Inside the first and last td there are nested tables. The last has lines and lines of text, while the first will be just one or two lines. The middle is just one line of text. How can I make the first table have its second row fill up the remaining horizontal space so that one line of text is centered horizontally, lining up with the free floating text in the second td. I've tried wrapping it in a div with a constant height, but that didn't do anything. I'm not sure what else I can do.
Desired result:
+------------+------------+------------+
| blah | bleh | blet |
+------------+------------+------------+
| | | asdf ds |
| | | sdff sdf |
| blah | blah | sadf sd f |
| | | sdf sdfs df|
| | | dss dsd |
+------------+------------+------------+
JSBIN
If the site doesn't need to be responsive and you know the height of the table you could add a CSS height/min-height property - otherwise I think you'd have to leverage some JavaScript to calculate the height of the table and then apply that value to the table.
http://jsbin.com/pifanoja/6/edit
.less_text table {
height:140px
}
I have a few block-level (or inline-block, it doesn't matter) elements with pre-defined dimensions. I want them at the top-right portion of a container div. I want them being positioned one next to the other, from top to the bottom. When there isn't enough space, I want a new column at left of the previous one, also going from top to the bottom.
In other words, I want something like this:
.------------.
| 4 1 |
| 5 2 |
| 3 |
'------------'
How can I achieve it using a pure-CSS solution with a clean HTML?
Even better if it can adapt itself to the available height.
Alternative effects that I can achieve (but are not what I want):
With a combination of column-width: <something>; column-gap: 0;, I can achieve this effect:
.------------.
| 1 4 |
| 2 5 |
| 3 |
'------------'
With float: right;, I can achieve this effect:
.------------.
| 3 2 1 |
| 5 4 |
| |
'------------'
If you change the writing mode, you can get the columns module to do what you want:
http://tinker.io/9f846
ul {
columns: 10em;
direction: rtl;
}
li {
direction: ltr;
}
I have a box which contains an image, which has float:left set, and textual contents.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | Content |
|--------- |
| |
| |
| |
--------------------------------------
Fig. 1
I generally consider it good to have the content float around the image. However, in case of using lists, the following look is annoying:
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
--------------------------------------
Fig. 2
I'd rather have it the following way (at least for considerably short lists, let's assume the list is short for now)
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
| Additional content (not in list) |
--------------------------------------
Fig. 3
I got the above look by making the list display: inline-block (and either inserting a <br> before the list, or wrapping it in a block-level element)
However, in case of any long list items (longer than the small width of the content field),
the float is cleared.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | |
|--------- |
| 1. Item |
| 2. A very long item, which makes |
| the list box just as wide as the|
| outer box. |
| 3. More items |
-------------------------------------|
Fig. 4
Why this happens seems clear to me. In the floated environment, first, the list is rendered as a block (because of display: inline-block), using the width of the outer box as environment width. As there is a long items, the resulting block will be as wide as the outer box. In a second step, the block is tried to fit next to the floating image, where it won't fit. Lastly, the float is cleared.
Is there any way to amend the situation? Like, first try to render the list with the shorter width, and if that fails, re-render? Or a completely different way to achieve what I want?
Put the list inside a DIV that is also floated left with a defined width.
Try a plain overflow:hidden on your list - this should do the trick.
See the example.
I have a list that looks like this
--------------------
| | |
| 1 | 2 |
| | |
| 3 | 4 |
| | |
| 5 | 6 |
| | |
--------------------
(it's a simple <ul> with <li>'s)
the container of this list, let's call it div.wrap has a fixed width like 400 pixels, and the list items are floated to left with 50% width.
How can I add a 10 pixel spacing between the left and right list items, without screwing up the layout?
Note that I have no control over the HTML from within the list, so I can't add any classes to these list items :(
I tried with margin-right: 10px on the <li>'s and margin-right: -10px on the <ul> but that doesn't work :)
An example with margin-right.
edit
If you want to hide second margin, you can make ul a little bit bigger than its wrap and hide overflow:
http://jsfiddle.net/YBy2K/3/
Not terribly elegant, but simple enough.