如何将第1个div向左移动,第2个向右移动?

时间:2022-08-25 17:22:03

I have a DIV with two update panels inside of them. The update panels render as divs but asp.net does not let me assign a class to a div. I can do this using jQuery by assigning css to the first child, then assigning different css to the 2nd or last child. Can I do this purely with css?

我有一个DIV,里面有两个更新面板。更新面板呈现为div,但asp.net不允许我将一个类分配给div。我可以使用jQuery将css分配给第一个孩子,然后将不同的css分配给第二个或最后一个孩子。我可以用css完全做到这一点吗?

Something similar to this:

与此类似的东西:

.outerdiv div
{
   width:45%;
}

/*float:left */
.outerdiv div(0)
{
   float:left;
}

/*float:right */
.outerdiv div(1)
{
   float:right;
}

3 个解决方案

#1


Or you can wrap the Update Panel DIVs with another DIV...

或者您可以使用另一个DIV包装更新面板DIV ...

<div class="outerdiv">
  <div class="outerdivleft">
    ... Update Panel Left ...
  </div>
  <div class="outerdivright">
    ... Update Panel Right ...
  </div>
</div>

#2


While this doesn't scale to more divs than 2, you can use:

虽然这不会扩展到超过2的div,但您可以使用:

.outerdiv div { float: right; }
.outerdiv div:first-child { float: left }

#3


Assuming that .outerdiv only contains those two div's, this should work in most modern web browsers:

假设.outerdiv只包含那两个div,这应该适用于大多数现代Web浏览器:

.outerdiv div:first-child {float:left;}
.outerdiv div:last-child {float:right;}

#1


Or you can wrap the Update Panel DIVs with another DIV...

或者您可以使用另一个DIV包装更新面板DIV ...

<div class="outerdiv">
  <div class="outerdivleft">
    ... Update Panel Left ...
  </div>
  <div class="outerdivright">
    ... Update Panel Right ...
  </div>
</div>

#2


While this doesn't scale to more divs than 2, you can use:

虽然这不会扩展到超过2的div,但您可以使用:

.outerdiv div { float: right; }
.outerdiv div:first-child { float: left }

#3


Assuming that .outerdiv only contains those two div's, this should work in most modern web browsers:

假设.outerdiv只包含那两个div,这应该适用于大多数现代Web浏览器:

.outerdiv div:first-child {float:left;}
.outerdiv div:last-child {float:right;}