CSS ul li height Auto looks like Google Plus - css

same as title, i want css ul li look like this:
--------------------------
| | |
| | |
| Block 1 | |
| | |
| | |
------------| Bloc 2 |
| | |
| | |
| | |
| Block 3 |-------------
| | |
| | |
| | |
------------| Block 4 |
| |
| |
| |
--------------
how i can do that? some body can help me?

I think what you are looking for is a jquery grid plugin. There are tons out there.
This is just an example from the first google results: http://gridster.net

Related

why pywinauto with backend uia can not recognize some qt element?

with pywinauto version 0.6.5, i try to automate some qt button click. after connecting to app window, print_ctrl_ids display something irrelevant controls excluding button.
|
| TitleBar - '' (L598, T165, R1340, B184)
| [u'', u'1', u'0', 'TitleBar']
| |
| | Menu - '系统' (L580, T165, R598, B183)
| | [u'Menu', u'\u7cfb\u7edfMenu', u'\u7cfb\u7edf', u'\u7cfb\u7edf1', u'\u
b\u7edf0']
| | child_window(title="系统", auto_id="MenuBar", control_type="MenuBar")
| | |
| | | MenuItem - '系统' (L580, T165, R598, B183)
| | | [u'\u7cfb\u7edfMenuItem', u'MenuItem', u'\u7cfb\u7edf2']
| | | child_window(title="系统", control_type="MenuItem")
| |
| | Button - '关闭' (L1321, T164, R1341, B184)
| | [u'\u5173\u95edButton', 'Button', u'\u5173\u95ed']
| | child_window(title="关闭", control_type="Button")
|
| Custom - '' (L580, T184, R1340, B853)
| ['Custom', u'Custom0', u'2', u'Custom1']
| |
| | Custom - '' (L580, T184, R1340, B853)
| | ['Custom', u'Custom0', u'2', u'Custom1']
| | |
| | | Custom - '' (L580, T184, R1340, B514)
| | | [u'4', 'Custom3']
| | | |
| | | | Custom - '' (L580, T461, R1340, B514)
| | | | [u'5', 'Custom4']
| | | | |
| | | | | Custom - '' (L652, T461, R1268, B514)
| | | | | [u'6', 'Custom5']
| | |
| | | Custom - '' (L652, T550, R1098, B569)
| | | [u'7', 'Custom6']
| | |
| | | Custom - '' (L652, T589, R1098, B647)
| | | [u'8', 'Custom7']
| | |
| | | Custom - '' (L1158, T550, R1268, B660)
| | | [u'9', 'Custom8']
| | |
| | | Custom - '' (L1158, T662, R1268, B710)
| | | [u'10', 'Custom9']

In CSS (w/o a #media query), how to apply/remove spacing when the component is a certain width

I'm trying to figure out the following layout using only CSS and no #media query. Say I have the following starting point for HTML:
<div class="layout">
<div class="content"></div>
</div>
The .layout contains a block-level .content element which has 100% width but a max-width of X. (e.g., X = 400px.) As .layout widens, and right after the max-width of .content is reached, I would want to suddenly apply inline (right/left) spacing of S (e.g., S = 16px.)
This would cause the width of .content to shrink back at first, but as .layout width continues to grow, .content would grow back to X at which point the inline (right/left) spacing would continue to grow, keeping .content centered.
400px 401px 432px 434px
+----------+ +---------------+ +-----------------+ +-------------------+
|.layout | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
+----------+ | +-------+ | | +---------+ | | +---------+ |
|.content--| | |-------| | | |---------| | | |---------| |
|----------| | |-------| | | |---------| | | |---------| |
|----------| | 1 |-------| 1 | | 1 |---------| 1 | | 1 |---------| 1 |
|--400px---| => | 6 |-369px-| 6 | => | 6 |--400px--| 6 | => | 7 |--400px--| 7 |
|----------| | p |-------| p | | p |---------| p | | p |---------| p |
|----------| | x |-------| x | | x |---------| x | | x |---------| x |
|----------| | |-------| | | |---------| | | |---------| |
+----------+ | +-------+ | | +---------+ | | +---------+ |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
+----------+ +---------------+ +-----------------+ +-------------------+
I've been trying various configurations with display:flex and display:grid but can't get it to work. Here's the base I was starting from, but it does not have the spacing applied:
/* "Inactive ingredients" would not be present in the actual implementation. */
.layout {
/* Inactive ingredients: */
background-color: yellow;
height: 200px;
}
.content {
max-width: 400px;
margin: 0 auto;
/* Inactive ingredients: */
background-color: green;
height: 100%;
}
<div class="layout">
<div class="content"></div>
</div>

How to counter the "ugliness" of Qt::ToolButtonTextUnderIcon?

I have a very large QToolButton with an icon and text under each other.
Instead of it being displayed like this:
|-------------|
| |
| |
| |
| <image> |
| text |
| |
| |
| |
|-------------|
it is displayed like this:
|-------------|
| <image> |
| |
| |
| |
| text |
| |
| |
| |
|-------------|
Is there a way to center them both vertically together, besides creating a custom layout for it and adding the image, text and QSpacerItems manually?
The following result would be suboptimal, but still much better than the original:
|-------------|
| |
| |
| <image> |
| |
| |
| text |
| |
| |
|-------------|

Place DIV Between & Above Two Lower DIVs

I am designing a webpage that requires at least three DIVs and possibly one container DIV. I need one DIV on the left, one in the middle, and one on the right. It seems simple enough but I also need the two side DIVs to underlap the middle DIV.
+-----------------------+
+-----------------------|-----+ +---------------------------+
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | o | | |
| | | v | | |
| | | e | | |
| 50% width | | r | | 50% width |
| | | l | | |
| | | a | | |
| | | y | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
+-----------------------|-----+ +---------------------------+
+-----------------------+
I saw this from a another StackOverflow answer, but I can't seem to translate it horizontally: http://jsfiddle.net/PWwQM/1/
Please help.
The trick is to use the float property to get the outer divs side by side: float:left; I think this is what you want, anyway:
http://jsfiddle.net/SuTLq/
Your diagram shows a gutter between the outer divs, but I didn't create one since you write that the outer divs are each 50% of the width.
Its easy just use position absolute for middle one.Check this fiddle.

How to create very dynamic menu like Picnik's?

Picnik's left hand menu:
http://www.picnik.com/app#/create/shapes
Basic features:
Accordion like components (but multiple items can be selected)
Each stack has multiple child stacked
The whole menu resizes depending on how many stacks are selected and a scrollbar is also shown if necessary
So how Do I go about creating a menu like this? Any pointers to boot?
Thanks!
You might try a combination of VBox, collapsible panels and lists ( http://hasseg.org/blog/?p=113 ) That should give you all the tools you need.
My Vision of it: (cause I like drawing with pipes and dashes)
VBOX-------------------------
| |
| Collapsing Panel-------- |
| | | |
| | Tile List---------- | |
| | | | | |
| | | Tile | | |
| | | Tile | | |
| | ------------------ | |
| ----------------------- |
| |
| Collapsing Panel-------- |
| | | |
| | Tile List---------- | |
| | | | | |
| | | Tile | | |
| | | Tile | | |
| | ------------------ | |
| ----------------------- |
| |
| Collapsing Panel-------- |
| | | |
| | Tile List---------- | |
| | | | | |
| | | Tile | | |
| | | Tile | | |
| | ------------------ | |
| ----------------------- |
----------------------------

Resources