1

ここでフロートを使用して、連絡先情報バーを写真の下に配置する方法。私はほとんど左に浮かんでいますが、最後の連絡先情報を写真に貼り付ける方法を見つけます.

ここに画像の説明を入力

これは私が上に移動したい場所ですが、そうすることができません。現在のセットアップは次のとおりです。

<div id='post'><div id='vpPhotos'>
  <img src='Images/img.jpg'/><img src='Images/default.png'/><img src='Images/default.png'/><img src='Images/default.png'/></br><a id='posttitle' href='#?photoID=$photoID'>View More Pictures</a>
  </div>
    <div id='vpTitle'>
            <h3>$eventTlt</h3>
        </div>
    <div id='vpprice'><b>Price: </b>$priceOfEvent</div>
  <div id='vpdate'>
  </br><b>Start Date:</b>  <div class='float-right'>$eventSD </div>
  </br><b>End Date:</b>  <div class='float-right'>$eventED</div>
  </br><b>Start Time:</b> <div class='float-right'> $eventTime </div>  
  <br/><b>Location Of Event:</b> <div class='float-right'>$location</div>
  <br/><b>Address Of Location:</b> <div class='float-right'>$locationAddress</div></div>
  <div id='eventdesc'>
  </br></br><b>Description:</b> &nbsp&nbsp$eventDesc </div>
<div id='vpcontact'>
  </br><h3 align='left'><b>Contact Information</b></h3> &nbsp&nbsp
  </br><b>Name:</b> &nbsp&nbsp$contactName
  </br></br><b>Email:</b> $emailAddress</div>


<div style='clear:both;'/>
</div>

私はすべて左に浮かんでいます。他のすべての div が左に浮いているかどうかはわかりません。#postが最も外側で、残りは基本的に名前で説明できます。

#post{
border:3px inset red;
margin-right:20px;
}
#vpPhotos{
border:3px outset blue;
float:left;
width:25%;
}
#vpTitle{
float:left;
border:3px inset green;
}
#vpdate{
float:left;
width: 20%;
border:3px inset blue;
margin-right:100px;
padding-right:300px;
}
#eventdesc{
float:left;
width: 73.74%;
border:3px inset green;
}
#vpcontact{
float:left;
width: 24%;
border:3px inset red;
}
#vpprice{
float:right;
width: 15%;
border:3px inset black;
}
4

1 に答える 1

0

そのためには、写真と連絡先の div を別の div に配置し、それをフロートして、他のすべての div を別の div にも配置する必要があります。

JS Bin での作業例。

更新されたコード:

HTML:

  <div id='post'>
    <div id='column-one'>
      <div id='vpPhotos'>
        <img src='Images/img.jpg'/><img src='Images/default.png'/><img src='Images/default.png'/><img src='Images/default.png'/></br><a id='posttitle' href='#?photoID=$photoID'>View More Pictures</a>
        </div>
        <div id='vpcontact'>
         <h3 align='left'><b>Contact Information</b></h3> &nbsp&nbsp
          </br><b>Name:</b> &nbsp&nbsp$contactName
          </br></br><b>Email:</b> $emailAddress
        </div>
      </div>

       <div id="column-two">
  <div id='vpTitle'>
              <h3>$eventTlt</h3>
          </div>
      <div id='vpprice'><b>Price: </b>$priceOfEvent</div>
    <div id='vpdate'>
    </br><b>Start Date:</b>  <div class='float-right'>$eventSD </div>
    </br><b>End Date:</b>  <div class='float-right'>$eventED</div>
    </br><b>Start Time:</b> <div class='float-right'> $eventTime </div>  
    <br/><b>Location Of Event:</b> <div class='float-right'>$location</div>
    <br/><b>Address Of Location:</b> <div class='float-right'>$locationAddress</div></div>
    <div id='eventdesc'>
    </br></br><b>Description:</b> &nbsp&nbsp$eventDesc </div>
</div>

<div style='clear:both;'/>
</div>

CSS:

#post {
    border: 3px inset red;
    margin-right: 20px;
}

#column-one,
#column-two {
    float: left;
    width: 24%;
}

#column-two {
    width: 76%;
}

#vpPhotos {
    border: 3px outset blue;
  width: 98%;
  float: left;
}

#vpTitle {
    float: left;
    width: 80%;
    border: 3px inset green;
}

#vpdate {
    width: 99%;
    float: left;
    border: 3px inset blue;
}

#eventdesc {
    float: left;
    width: 99%;
    border: 3px inset green;
}

#vpcontact {
    float: left;
  width: 98%;
    border: 3px inset red;
}

#vpprice {
    float: right;
    width: 15%;
    border: 3px inset black;
}
于 2013-02-11T03:48:19.300 に答える