开发者

Floating image right of table.Is it possible?

开发者 https://www.devze.com 2023-03-14 17:53 出处:网络
new to css . In asp.net mvc 3 I load a list of customers in a table. Next to this table I would like to float some images.How do you do it in 开发者_运维知识库css?

new to css .

In asp.net mvc 3 I load a list of customers in a table.

Next to this table I would like to float some images.How do you do it in 开发者_运维知识库css?

thanks a lot


The answer depends on how much images you want and how they are aligned to each other.

The simplest form just floats the table left, see http://jsfiddle.net/NGLN/8AHhG/, but this only works for the height of the table.

Another form floats the images right, see http://jsfiddle.net/NGLN/8AHhG/2/, but that layout may not be disered.

You can also group the images, kind of a combination of both above, see http://jsfiddle.net/NGLN/8AHhG/3/.


float:right the images and lower the width of the table

Update Example

<div id="container">
  <table id="mytable">
  </table>
  <div id="images">
    <img />
    <img />
  </div>
</div>

And the CSS

#container, mytable, images {
  margin:0;
  padding:0; /* Avoid excess of width due to margins or paddings */
}
#container {
  width:1000px;
}
#mytable {
  width:600px;
  float:left;
}
#images {
  width:400px;
  float:right;
}

This way you should have now 2 columns, the left one which is your table, and the right one which is a div containing all the images, which should stick to the right of the table.

0

精彩评论

暂无评论...
验证码 换一张
取 消