HTML trouble: multiple Divs float_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-12 13:10 出处：网络

I\'m sitting now 1 hour working on this problem: How to make \"Field Item 2\" float at the right site of \"Field Item 1\" Is that possible with CSS at all? Or are there too may divs in between?

相关专题：css css-float

I'm sitting now 1 hour working on this problem: How to make "Field Item 2" float at the right site of "Field Item 1" Is that possible with CSS at all? Or are there too may divs in between? Any idea? Tanx a lot!

<html>
<head>
    <title>Test float</title>
</head>

<body>
    <div class="group-header user-slogan">
        <div class="field field-name-field-user-slogan field-type-text field-label-hidden">
            <div class="field-items">
                <div class="field-item e开发者_Go百科ven">Field Item1</div>
            </div>
        </div>
        <div class="even zitatgeber" style="float:left;">Field Item2</div>
    </div>
</body>
</html>

You might want to try this, add style="float:left;" into the div which is in the same level with the Field Item2, and change the style of Field Item2 to float:right. Here it is:

<body>
<div class="group-header user-slogan">
    <div class="field field-name-field-user-slogan field-type-text field-label-hidden" style="float:left;">
        <div class="field-items">
            <div class="field-item even">Field Item1</div>
        </div>
    </div>
    <div class="even zitatgeber" style="float:right;">Field Item2</div>
</div>
</body>

Remember to add the specific width for the left and right, so the item will float correctly.

You should use float:left on both the divs

Probably, you should specify width for your parent div and take the div you want to float inside it(parent).

Try this :

<html>
<title>Test float</title>
</head>

<body>
<div class="group-header user-slogan">
    <div class="field field-name-field-user-slogan field-type-text field-label-hidden">
        <div class="field-items" style="width: AAApx;">
            <div class="field-item even" style="float:left;">Field Item1</div>
            <div class="even zitatgeber" style="float:left;">Field Item2</div>
        </div>
    </div>

</div>

</body>
</html>

You can also float the second item div to the right if the parent div behaves as a block level element