I need help with my product list. Because of large text in 3 element, 5 element moves down. How to fix it? List items have "first" and "last" classes, also.
Fixed it. Just add "clear: left" to .first item
Set each product div to a fixed height. That way the items can fill the given space responsively and fill as much horizontal space as possible.
If you were to clear the float on each row, you would be stuck with four products on each row or worse if the parent element becomes smaller than 4 items wide, which would push the last elements down into an ugly new row.
From:
| |
| X X X X |
| |
| X X X X |
| |
To:
| |
| X X X |
| X |
| |
| X X X |
| X |
| |
Related
i want to code a video platform and have a problem and can't think of a solution right now.
I want to divide a rectangle into equal parts
Came up with a solution for a square but i am unable to come up with a solution for different ratios.
Maybe u guys can help me.
example:
BAD GOOD
n=4
________ ________
| | | | | | | |
| | | | | |---|---|
|_|_|_|_| |___|___|
n=2
________ ________
| | | | |
| | | | |
| | | |–––––––|
| | | | |
|___|___| |_______|
Let X be the width of the rectangle and let Y be the height. Let the goal be to divide this rectangle into N rectangles of equal area whose sides are as close to equal as possible.
The solution is not difficult. First, find all factors of the N. Then, write N as a product of two numbers A and B such that A and B are as close as possible (that is, there is no other choice A' and B' such that |A' - B'| < |A - B|). Assume we chose A > B. All we have to do is put A - 1 lines along the long side of the rectangle, and B - 1 lines along the short side.
For example: n = 4, A = 2 and B = 2 is optimal, so you put A - 1 = 1 and B - 1 = 1 lines along each side of the rectangle (as in your GOOD column for n = 4).
For example: n = 21, A = 7 and B = 3 is optional, so you'd put 6 lines along the long edge of the rectangle and 2 lines along the short edge, equally spaced:
_ _ _ _ _ _ _
|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|
Of course, for prime values of N, you are not going to get a very nice solution, but then there is no nice solution in that case. In such cases - where A and B are very very different and the rectangle's dimensions are not similarly different - you might want to choose another solution that doesn't require all rectangles have the same side lengths. You could do better by allowing 2 or 3 kinds of rectangles, or more, into the solution, for instance.
I've looked all over for answers on how to do this, including dozens of answers on Stack Overflow that provide almost but not quite solutions.
I am trying to make a table/list with a number of options. Imagine a table with the following columns:
Delete: A simple icon. This must be a fixed width (because it uses an image)
Name: The name of the item in the list. This should fill the remaining available space, but if the text overflows, I want the ellipsis to appear.
Options A/B/C: You can imagine these are check boxes and also are a fixed with.
So on a wide table it'd look like this:
| X | Item 1 in the list | A | B | C |
| X | Item 2 | A | B | C |
| X | Item 3 has a pretty long name | A | B | C |
| X | Item 4's name is long, realll... | A | B | C |
And on a short table (or say, after the window resized):
| X | Item 1 in the list | A | B | C |
| X | Item 2 | A | B | C |
| X | Item 3 has a pretty... | A | B | C |
| X | Item 4's name is... | A | B | C |
If someone could provide a fiddle showing this in action, that'd be absolutely fantastic.
EDIT: Thank you so much Plymouth!
I've created a fiddle here.
These are the important styles:
table
{
table-layout:fixed;
}
.col2
{
width:auto;
text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;
}
Is this what you're after?
Is there a way to input a newline into a table cell? For example, say I have a table like this:
+==========+==========+==========+
+ Header 1 + Header 2 + Header 3 +
+==========+==========+==========+
+ Item 1 + + +
+ Item 2 + + +
+----------+----------+----------+
I want the above to create a table with two rows, three columns, and the second row, first column to display Item 1 and Item 2 on separate lines.
I have tried the line blocks syntax |, but it doesn't work inside a table cell. I can use list syntax, but I don't want bullet points to appear.
First of all I think your table syntax is incorrect, should it not be:
+----------+----------+----------+
| Header 1 | Header 2 | Header 3 |
+==========+==========+==========+
| Item 1 | | |
| Item 2 | | |
+----------+----------+----------+
Note that the top row is made up of hyphens, not equal signs, and the rows are separated by pipes, |, not plus signs.
Now with this table, the line block syntax:
+----------+----------+----------+
| Header 1 | Header 2 | Header 3 |
+==========+==========+==========+
| | Item 1 | | |
| | Item 2 | | |
+----------+----------+----------+
seems to work: testing with Pandoc the bottom left cell gets transformed into the following HTML:
<td align="left">Item 1<br />Item 2</td>
Note the line break <br /> in between Item 1 and Item 2.
You can also leave a gap between the lines like this
+----------+----------+----------+
| Header 1 | Header 2 | Header 3 |
+==========+==========+==========+
| Item 1 | | |
| | | |
| Item 2 | | |
+----------+----------+----------+
This method tends to be friendlier with editors so they dont think you have accidentally added an extra pipe
I use the following syntax to create tables including multiline cells with sphinx:
.. list-table::
* - **HEADER1**
- **HEADER2**
- **HEADER3**
* - TEXT 1
- | MULTILINE
| TEXT
- | MULTILINE
| TEXT 2
I use line blocks with beginning | to preserve the line-breaks.
Is there anyway to refer a table in RestructuredText? something like see table `referencetable`_
(I saw some workarounds for referencing figures. couldn't find a way to refer a table though .. )
Thanks!
You can simply define a hyperlink target.
Here is table-1_.
.. _table-1:
+------------+------------+-----------+
| Header 1 | Header 2 | Header 3 |
+============+============+===========+
| body row 1 | column 2 | column 3 |
+------------+------------+-----------+
| body row 2 | Cells may span columns.|
+------------+------------+-----------+
| body row 3 | Cells may | - Cells |
+------------+ span rows. | - contain |
| body row 4 | | - blocks. |
+------------+------------+-----------+
In RestructuredText, you can render a header row in a table like this (taken from the documentation :
+------------------------+------------+----------+----------+
| Header row, column 1 | Header 2 | Header 3 | Header 4 |
| (header rows optional) | | | |
+========================+============+==========+==========+
| body row 1, column 1 | column 2 | column 3 | column 4 |
+------------------------+------------+----------+----------+
| body row 2 | Cells may span columns. |
+------------------------+------------+---------------------+
| body row 3 | Cells may | - Table cells |
+------------------------+ span rows. | - contain |
| body row 4 | | - body elements. |
+------------------------+------------+---------------------+
Is it possible to do the something similar with the first column?
An example, which clearly doesn't work, could be the following (note the double like at the end of column 1):
+------------------------++------------+----------+----------+
| Header row, column 1 || Header 2 | Header 3 | Header 4 |
| (header rows optional) || | | |
+========================++============+==========+==========+
| body row 1, column 1 || column 2 | column 3 | column 4 |
+------------------------++------------+----------+----------+
| body row 2 || Cells may span columns. |
+------------------------++------------+---------------------+
| body row 3 || Cells may | - Table cells |
+------------------------++ span rows. | - contain |
| body row 4 || | - body elements. |
+------------------------++------------+---------------------+
You may achieve this using list-table directive with option stub-columns. Or, you may even combine stub-columns with header-rows. See the http://docutils.sourceforge.net/docs/ref/rst/directives.html#list-table for the details. Hereafter is a simple example:
.. list-table:: Sample list table
:widths: 10 20 20
:header-rows: 1
:stub-columns: 1
* -
- Column 1
- Column 2
* - Row 1
- Hello
- World!
* - Row 2
- Hello
- List Table!
* - Row 3
- This
- Works
An obvious disadvantage is that you need to maintain table content as a list, which may be not that much convenient as with regular simple tables. So, you might want to check out the csv-table directive here: http://docutils.sourceforge.net/docs/ref/rst/directives.html#id1 , which also has option stub-columns.
If you need to stick to regular tables syntax - sorry, I'm not sure this is possible. As a workaround - you can use strong emphasis for text in the first column :-)