Положение дел в столбцах?

Question

Положение дел в столбцах?

0

У меня есть 2 divs, которые я хочу бок о бок, которые вместе равны ширине 500 пикселей. Как мне это сделать? Я думал, возможно, используя <span> для этого. Я не знаю, с чего начать. благодаря

<span style="float: right; width:250px; margin-right: 550px;">
  <h3>NEWSLETTER</h3>
  <hr width="100" id="style" />
  <br />
  <form name="ccoptin" target="_blank" method="post">
    <font size="+1" face="LeagueGothic">Email:</font>
    <input name="emailBox" type="text" class="textField" placeholder="Not Available Yet" size="25" />
    <input type="button" class="submitBtn" value="Submit" disabled />
    <br />
    <center>
      <em>Occasional Discounts!</em>
    </center>
  </form>
</span>

<span style="float: left; width: 350px; margin-left: 550px;">
  <h3>OTHER INFO</h3>
  <hr width="100" id="style" />
  <br />

user3547286 18 апр. 2014, в 04:33

Источник

0

Опубликовать код Span не является блоком и не создаст «столбец», не определив его как блок и его ширину / высоту.
WASasquatch 18 апр. 2014, в 02:26
0

Но вы указываете div ... Что вы пробовали? .column{width:500px;display:inline-block} например, предположим, что вы дали им класс столбца
Kai Qing 18 апр. 2014, в 02:26
0

Я отправил некоторый код.
user3547286 18 апр. 2014, в 02:29

Показать ещё 1 комментарий

Теги:

html

css

3 ответа

Ещё вопросы

Опубликовать код Span не является блоком и не создаст «столбец», не определив его как блок и его ширину / высоту.
Но вы указываете div ... Что вы пробовали? .column{width:500px;display:inline-block} например, предположим, что вы дали им класс столбца

Jyoti · Answer 1 · 2014-04-18T04-13-00.000Z

HTML:

<div id="main-div">
    <div class="divone">
          <h3 style>NEWSLETTER</h3><hr/>          
          <form class="form">
          Email: 
          <input type="text" name="emailBox" class="textField" placeholder="Not Available Yet">
          <input type="submit" value="Submit" class="submit-btn">
          </form><br />

    </div>

    <div class="divtwo">
         <h3 style>OTHER INFO</h3><hr/>
    </div>
    <div style="clear:both"></div>
          <center>
          <em>Occasional Discounts!</em>
          </center>
</div>

CSS:

#main-div{
    width:500px;
    margin:0 auto;
}
.divone,.divtwo{
    width:250px;
    float:left;
}
h3{
    margin:0;
    padding:0;
}
hr{
    margin:0;
    padding:0;
    width: 54%;
}
.form{
padding-top: 10px;
}
.textField{

}
.submit-btn{
    float: left;
    margin-top:10px;
}

Надеюсь, это поможет вам.

JCBiggar · Answer 2 · 2014-04-18T00-23-00.000Z

вы можете использовать блоки span для этого. Я бы порекомендовал divs. Но если вы должны использовать span. добавить к display:block; стиля display:block;

Вот ДЕМО: http://jsfiddle.net/tL7Sp/

<div style="width:500px;">
<span style="float: left; width:49%;display:block;"> 
<h3>NEWSLETTER</h3>
      <hr width="100" id="style" />
      <br />
      <form name="ccoptin" target="_blank" method="post">
        <font size="+1" face="LeagueGothic">Email:</font>
        <input name="emailBox" type="text" class="textField" placeholder="Not Available Yet" size="25" />
        <input type="button" class="submitBtn" value="Submit" disabled />
        <br />
        <center>
          <em>Occasional Discounts!</em>
        </center>
      </form>
    </span>

<span style="float: right; width: 49%; display:block;">
  <h3>OTHER INFO</h3>
  <hr width="100" id="style" />
  <br />
 </div>

В принципе, чтобы добавить div бок о бок в ширину 500 пикселей, вы бы сделали что-то вроде этого:

HTML

<div class="maindiv">
   <div class="divone"></div>
   <div class="divtwo"></div>
</div>

CSS

.maindiv {
   width:500px;
}
.divone, .divtwo {
   width:49%; 
   float:left;
}

Всегда нравятся ваши объяснения и примеры.
спасибо за это, я действительно ценю это! :)
Спасибо вам большое! Это творило чудеса.

Josh Rutherford · Answer 3 · 2014-04-18T00-10-00.000Z

Вам нужно начать с удаления поля на каждом промежутке. Также попробуйте изменить их, чтобы поплавать в одном направлении. Например:

span {
    float: left;
    width: 250px;
}

span:nth-of-type(2) {
    float: left;
    width: 350px;
}

Посмотреть этот код

Это не будут столбцы, вам не хватает высоты и display:block; это просто фоновые линейные элементы. Как BG на A ссылку.
Я согласен, что элемент уровня блока был бы намного лучшим выбором, но пользователь пытался сделать это, используя промежутки. Кроме того, не было никаких упоминаний о том, что им нужно иметь одинаковый рост. Хотя они наверняка работают как колонки.