StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
18379340
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2013-08-22T11:38:52.607
FavoriteCount
0
LastActivityDate
2013-08-22T21:41:00.497
LastEditDate
2017-05-23T10:30:27.603
LastEditorUserId
-1
OwnerUserId
1725764
ParentId
18378559
PostTypeId
2
Score
6
ViewCount
0
LastEditorDisplayName
text
Body
<p>When you set <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" rel="nofollow noreferrer"><code>display: inline-block;</code></a> to an element, the element will be flowed with surrounding content.</p> <p>So you would need to add a line-break <code><br></code> to produce a line break in text, but the vertical space of the line will remains as <a href="https://stackoverflow.com/a/18378962/1725764">you mentioned</a>. <em>[and one more thing happens is the horizontal scroll-bar which will appear <a href="http://jsbin.com/eGug/6/edit" rel="nofollow noreferrer">if you decrease the width of the panel</a>.]</em></p> <h2>Introduction</h2> <p>Using <code><table></table></code> element has a lot of benefits here.</p> <p>When you use <code><table></code> element <em>(as the following)</em>, it causes the content goes to the next line. And when the remain horizontal space gets lower than width of the <code><table></code>, it'll go to the next line and push the content down.</p> <p>And also, horizontally scroll-bar won't appear in this case, because browsers won't display the <code><table></code> when it hasn't any element inside or any specific <code>height</code> or <code>border</code> properties.</p> <p><em>(different browsers have different behavior, Mozilla Firefox doesn't display <code>table</code> element with a specific <code>border</code> property but Google Chrome does.)</em></p> <p><strong>HTML:</strong></p> <pre class="lang-html prettyprint-override"><code><img src="http://placehold.it/100x50" alt=""> <table></table> Lorem ipsum dolor sit amet... </code></pre> <p><strong>CSS:</strong></p> <pre class="lang-html prettyprint-override"><code>img { float: left; } table { width: 12em; } </code></pre> <p>Here is the <strong><a href="http://jsbin.com/eGug/9/edit" rel="nofollow noreferrer">JSBin Demo</a></strong>.</p> <h2>The Solution</h2> <p>As a pure CSS way, I used <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before" rel="nofollow noreferrer"><code>::before</code></a> pseudo-element to create a element which behaves like the <code><table></code> HTML element.</p> <p><strong>HTML:</strong></p> <pre class="lang-html prettyprint-override"><code><div> <img src="http://placehold.it/400x400" alt=""> <p class="content">  </p> </div> </code></pre> <p><strong>CSS:</strong></p> <pre class="lang-css prettyprint-override"><code>img { float: left; } .content:before { content: ' '; display: table; width: 10em; /* <-- Change the current width size */ } </code></pre> <p>Here is the <strong><a href="http://jsbin.com/EJeVUrE/1/edit" rel="nofollow noreferrer">JSBin demo</a></strong>.</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POFlowing text with minimum column width around floated image
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USCommunity
UserOwnerUserId
1. USHashem Qolami
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.