Databases
StackOverflow2013
Postsdbo
POLine up nested div tags
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLine up nested div tags
    primarykey
    data
    text
    <p>Please have a look at the image below. I'm trying to remove the white space in between the images on the left. Each of the images are in a div tag. My CSS is located after the image.</p> <p><img src="https://i.stack.imgur.com/hRN0Q.png" alt="I&#39;m trying to get these div tags to come up next to eachother"></p> <pre><code>div.Forum { border: 2px solid black; text-align: center; padding: 0 36px; } div.Forum div { display: inline; float: left; clear: none; } div.ForumChild { border: 1px solid black; background-color: #F2F2F2; width: 228px; height:auto; padding: 12px 12px 10px 10px; margin: auto auto; margin-bottom: 10px; margin-right: 20px; overflow: hidden; } div.ForumChild img { width: 226px; height: auto; border: 1px solid black; float: left; border-radius: 2px; } </code></pre> <p>The Forum class is the parent and the ForumChild class is used for each of the images. Here is the HTML. It's created in a Razor View.</p> <pre><code>&lt;div class="Forum"&gt; &lt;p&gt;The Forum&lt;/p&gt; @foreach (var item in Model) { &lt;div class="ForumChild"&gt; &lt;img src="@item.Blog.Image.img_path" alt="Not Found" /&gt; &lt;br /&gt; &lt;/div&gt; } &lt;/div&gt; </code></pre> <p>Thank you in advance.</p> <p>I updated my code to the following to resolve my issue. Thanks everyone!</p> <pre><code>@{ ViewBag.Title = "Home Page"; int counter = 0; } &lt;div class="Forum"&gt; &lt;p&gt;The Forum&lt;/p&gt; @for (int z = 0; z &lt; 3; z++) { counter = 0; &lt;div class="ForumChild"&gt; @foreach (var item in Model) { if (counter % 3 == z) { &lt;img src="@item.Blog.Image.img_path" alt="Not Found" /&gt; } counter++; } &lt;/div&gt; } &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdright
    1. USdright
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POLine up nested div tags
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI don't know the answer, sorry, but it looks like you are mistaken as to what the alt tag on an image is for. It is meant to describe the image so screen readers know what the image is, whereas you think it is used as text if the img isn't found. if you are storing a description of the image somewhere, I would recommend using that as the alt information
      singulars
      1. POLine up nested div tags
      1. USAndy
    2. COOkay, Thank you
      singulars
      1. POLine up nested div tags
      1. USdright
    3. COYour div.Forum `margin` is useless without `width`, you can delete it. And you can use shorthand for padding like: `padding:0 36px`. And try `display:inline` for div.Forum div.
      singulars
      1. POLine up nested div tags
      1. USK-Gun
 

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.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload