Я пытаюсь создать страницу магазина со ссылками на PayPal для покупки товаров. Мне дали код от PayPal, но я не могу его правильно отформатировать. Я хочу, чтобы два элемента были выровнены рядом друг с другом, но не могу понять, как это сделать.

#shirt {
width:380px;
margin:0;
clear:both; 
}

#content {
margin:0 0px 0 0;
margin:0 0px 0 0;
border-right:1px solid #000000;
border-left:1px solid #000000;
padding:10px 25px 30px 25px;
}


    <div id="content">
        <!--SHIRT ONE--!>
        <div id="shirt">
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="B2CBLQAD7BJ4J">     
            <table>
                <tr>
                    <td>

            <div class="img">
                <input id="image" type="image" src="cover.png" name="tee" width="250" height="250"></td>
            </div>

            <table>
                <tr>
                    <td><input type="hidden" name="on0" value="Color">Color</td>
                    <td><input type="hidden" name="on1" value="Size">Size</td>
                </tr>
                <tr>
                    <td>
                        <select name="os0">
                            <option value="White">White</option>
                            <option value="Black">Black</option>
                            <option value="Grey">Grey</option>
                        </select>
                    </td>
                    <td>
                        <select name="os1">
                            <option value="S">S </option>
                            <option value="M">M </option>
                            <option value="L">L </option>
                            <option value="XL">XL </option>
                        </select> 
                    </td>
                </tr>
            </table>
            <br />

            <input type="hidden" name="currency_code" value="USD">
            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
            </form>
        </div>
        <!--SHIRT TWO--!>
        <div id="shirt">
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="B2CBLQAD7BJ4J">     
            <table>
                <tr>
                    <td>

            <div class="img">
                <input id="image" type="image" src="cover.png" name="tee" width="250" height="250"></td>
            </div>

            <table>
                <tr>
                    <td><input type="hidden" name="on0" value="Color">Color</td>
                    <td><input type="hidden" name="on1" value="Size">Size</td>
                </tr>
                <tr>
                    <td>
                        <select name="os0">
                            <option value="White">White</option>
                            <option value="Black">Black</option>
                            <option value="Grey">Grey</option>
                        </select>
                    </td>
                    <td>
                        <select name="os1">
                            <option value="S">S </option>
                            <option value="M">M </option>
                            <option value="L">L </option>
                            <option value="XL">XL </option>
                        </select> 
                    </td>
                </tr>
            </table>
            <br />

            <input type="hidden" name="currency_code" value="USD">
            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
            </form>
        </div>
    </div><!--content--!>
0
Ryan Tice 14 Мар 2013 в 07:39

1 ответ

Лучший ответ

Попробуйте изменить свой css вот так и указать ширину контейнеру

#shirt {
 float: left;
 margin: 0;
 width: 380px;
}

Посмотрите эту демонстрацию http://jsfiddle.net/sanjaymv/9ghZD/

1
Sanjay 14 Мар 2013 в 08:26
Правая граница сдвинута вверх, и рубашки больше не находятся в пределах границы, есть идея?
 – 
Ryan Tice
14 Мар 2013 в 08:45
Привет, я проверяю эту демонстрацию, там вы видите правую границу, теперь я выделил ее красным цветом .. если вы хотите, чтобы граница во всю длину, укажите высоту
 – 
Sanjay
14 Мар 2013 в 08:57
Хм, не знаю, почему, теперь я не могу вернуть его обратно по границе, как показано здесь s15.postimage .org / s2htrj6e3 /…
 – 
Ryan Tice
14 Мар 2013 в 09:23
Привет, проверьте демонстрацию. Вы не указали высоту контейнера. Внутри контейнера некоторые div и формы, я думаю, из-за этого контейнер не принимает высоту автоматически, если вы можете указать высоту, это нормально, проверьте демонстрацию.
 – 
Sanjay
14 Мар 2013 в 09:41
Выравнивание работает после опечатки, но сейчас оно выглядит так. s16.postimage.org/qw4n120ph/…
 – 
Ryan Tice
14 Мар 2013 в 09:48