0

检查了以前的帖子，但仍然找不到问题 - 以前有 3 个 div，在考虑边框/填充/边距后，全部向左浮动并完美对齐。

现在我正在尝试进行简单的布局更改（2 个 div / 浮动左侧 - 并排），但无法让第二个 div 与第一个 div 对齐，不知道出了什么问题。检查错过的结束标签等，但看不到任何会导致这种情况的东西。

任何想法将不胜感激！下面包含了现在无法使用的计算器的 HTML、CSS 和 JS，不确定它们是否会正确显示。

HTML 

<h2>What is General Services?</h2>
<div class="d1gs">
   The District 1 Committee of Alcoholics Anonymous is a service body for the groups in         
   District 1. It is comprised of the groups' General Service Representatives (GSR's),     
   District ...
</div>
<br>
<div class="d1gs">
   Its primary purpose is to provide a forum for sharing collective 12th Step experience 
   how best to carry the AA message in the Pinellas County area. The District also has   
   responsibility ...
</div>
<br>
<div class="d1gs">
   District 1 is supported by the voluntary contributions of the groups it serves. The     
   District One Committee structure borrows much from "The AA Service Manual and Twelve 
   Concepts ...
</div>
<br>

<!-- begin.column2 -->
<div id="column2">
   <div id="center"><strong>Sobriety Calculator</strong></div>
   <em><small>
      Every alcoholic who has been graced with the gift of sobriety is a miracle
      please use the calculator below to find out how long you've enjoyed your new found 
      freedom… 
   </small></em>
   <div class="center" style="height: 5px;"><small><strong>RIGHT DOWN TO THE SECOND! 
   </strong></small></div>
   <form id="live" class="center" name="live">
      <small>Sober Date: (i.e. <span style="font-style: italic;">May 28, 1995</span>)</small>
      <input type="text" name="age" size="18" />
      <input onclick="sobertimer(this.form)" type="button" name="start" value="Click Here" /> 
      <input type="reset" name="resetb" value="Reset" />
      <label><small>Sober Days</small> </label> <br><input type="text" name="time3" size="12" />
      <label><small>Sober Hours</small> </label> <br><input type="text" name="time2" size="12" />
      <label><small>Sober Minutes</small></label> <br><input type="text" name="time1" size="12" />
      <label><small><em><strong>SOBER HEARTBEATS!</strong></em></small></label><br>
      <input type="text" name="time4" size="12" />
  </form>
</div>
<!-- end .column2 -->

CSS

/* What is District 1 General Services?
-------------------------------------------------------------- */
.d1gs { 
  font-family: 'Georgia', 'Times New Roman', Times, serif;
  font-size: 14px;
  float: left;
  width: 55%;
  margin-bottom: 1.5%;
  margin-top: .5%;
  margin-left: .35%;
  padding: 1% 0 1% 2%;
}

/* Sobriety Calculator
-------------------------------------------------------------- */
#column2 {
  font-family: 'Georgia', 'Times New Roman', Times, serif;
  font-size: 13px;
  line-height: .5em;
  font: 80%/1.4 Verdana, Arial, Helvetica, sans-serif;
  float: left;
  width: 30%;
  margin-bottom: 1.5%;
  margin-left: .35%;
  padding: .5%;
  height: 100%;
  background-color: rgba(255,255,255,.3);
  border-style: inset;
  border-width: 3px;
  border-color: #B2B200;
}

Javascript 

<script type="mce-text/javascript">// <![CDATA[
function sobertimer() { 
  today = new Date(); SoberDay = new
  Date(document.live.age.value); timeold = (today.getTime() - SoberDay.getTime()); 
  sectimeold = timeold / 1000; secondsold = Math.floor(sectimeold); msPerDay = 
  24 * 60 * 60 * 1000; timeold = (today.getTime() - SoberDay.getTime()); 
  e_daysold = timeold / msPerDay; daysold = Math.floor(e_daysold); e_hrsold = 
  (e_daysold - daysold) * 24; hrsold = Math.floor(e_hrsold); minsold =   
  Math.floor((e_hrsold - hrsold) * 60); document.live.time4.value = secondsold;  
  document.live.time3.value = daysold;  document.live.time2.value = hrsold; 
  document.live.time1.value = minsold; timerID = setTimeout("sobertimer()", 1000); 
}
// ]]></script>
4

1 回答 1

0

如果我现在明白你想要两列......所以让它将你的三个初始 div 包含在 a 中<div id="column1>"，并使其以固定宽度向左浮动。然后让你的column2浮动向右与重新宽度。

*注意填充、边距和边框的宽度。

看到这个小提琴，告诉我这是否是你想要的http://jsfiddle.net/pGSAR/6/

于 2013-10-24T17:19:43.433 回答