JQuery手风琴面板中的2列

I have a form within a JQuery Accordion. I am trying to split that form into 2 columns.

我在JQuery手风琴中有一个表单。我试图将该表格拆分为2列。

<div class="content">
<div id="accordion">  
<h3><a href="#">Section 1</a></h3>
    <div>
        <form enctype="multipart/form-data" method="post" action="somepage.php">
            <div id="form_wrapper"> <!--Keep this to the left-->
                <label for="number">Number: </label>
                <input type="text" id="number" name="number" value="" />
                <br />
                <label for="name">Name: </label>
                <input type="text" id="name" name="name" value="" />
                <br />
                <label for="address">Address: </label>
                <input type="text" id="address" name="address" value="" />
                <br />
                <label for="city">City: </label>
                <input type="text" id="city" name="city" value="" />
                <br />
                <div id="image_wrapper"> <!--Keep this to the right-->
                    <img  src="" alt="photo" />
                    <br />
                    <label for="photo_desc">Photo Description: </label>
                    <input type="text" id="photo_desc" name="photo_desc" value="" />
                    <br />
                    <label for="new_picture">New Facility Photo:</label>
                    <input type="file" id="new_picture" name="new_picture" />
                    <br />
                </div>
                <br />
            </div>
            <input type="submit" value="Update" name="update">
        </form>
    </div>
        <h3><a href="#">Section 2</a></h3>
    <div>
    </div>
        <h3><a href="#">Section 3</a></h3>
    <div>
    </div>
        <h3><a href="#">Section 4</a></h3>
    <div>
    </div>
</div>
</div>

I am trying to get the <div id="image_wrapper"> to be off the right hand side of the accordion panel, and the rest of my text inputs and labels to be on the left.

我试图将

放在手风琴面板的右侧,其余的文本输入和标签位于左侧。

Here is a JSFiddle demonstrating what I am trying to do, and the things I have done

这是一个JSFiddle,展示了我想要做的事情以及我所做的事情

I can't seem to get the css just right any help would be great.

我似乎无法让css恰到好处,任何帮助都会很棒。

1 个解决方案

#1

if I have undertstood well your questions you basically want your image_wrapper and your form wraperside by side taking 50% of the avaliable width each.

如果我对你的问题做得很好,你基本上都希望你的image_wrapper和你的形式包装在一起,每个都有50%的可用宽度。

To achieve that the easiest way is to put the image_wrapper outside the form wraper in the html so they can float nicely, then add both 50% width and float left and I just have added:

要实现这一点,最简单的方法是将image_wrapper放在html中的表单包装器之外,这样它们可以很好地浮动,然后添加50%的宽度并向左浮动,我刚刚添加了:

* {
    box-sizing: border-box;
}

to your css to make everything fits: FIDDLE

你的css让一切都适合:FIDDLE

#1