在HTML中并排排列元素 [英] Aligning elements side by side in HTML
问题描述
我正在一个网站上工作（这是我作为开发人员的第一个网站），我想知道是否有人可以帮助我将这些项目水平排列在一起。我不知道如何编写HTML代码，所以我对此完全不熟悉。在大多数情况下，当我开发网站时，我会尽量利用在线帮助，但在此情况下，我需要您的帮助。
该网站使用WordPress，这是将成为一个页面。使用W-P表格重新加载的表格和Google地图。
以下是目前的代码：
< p style =text-align：left;> [ table id = 4 /]< small>< / small>< / p>< p style =text-align：right;>
< iframe src =http://maps.google.com/maps?f=q&source=s_q&hl=zh-TW&geocode=&q=Avie's+滑雪+体育+ 100 +主+街+西风，+ R + 02891-2194&放大器;放大器;水溶液=&放大器;放大器; SLL = 41.375316，-71.831092&放大器;放大器; SSPN = 0.006948,0.016512&放大器;放大器; vpsrc = 0&安培;安培; G = 100 +主+街+西风，+ R + 02891-2194&放大器;放大器，即= UTF8&放大器;放大器; HQ = Avie是的+滑雪+体育+ 100 +主+街+西风，+ R + 02891 -2194&放大器;放大器; hnear =&放大器;放大器;半径= 15000&放大器;放大器; T = M&放大器;放大器; 11 = 41.379063，-71.831102&放大器;放大器; SPN = 0.015457,0.027466&放大器;放大器; Z = 15&放大器;放大器; iwloc = lyrftr：m，9024240540147588029,41.375323，-71.831043& amp; output = embedframeborder =0marginwidth =0marginheight =0scrolling =nowidth =640height =480> < / iframe中>
< small>< a style =color：＃0000ff; text-align：left; HREF =http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Avie%27s+SKi+Sports+100 +主+街+西风，+ R + 02891-2194&放大器;放大器;水溶液=&放大器;放大器; SLL = 41.375316，-71.831092&放大器;放大器; SSPN = 0.006948,0.016512&放大器;放大器; vpsrc = 0&放大器;放大器; G = 100 +主+街+西风，+ R + 02891-2194&放大器;放大器，即= UTF8&放大器;放大器; HQ = Avie是％-27 +滑雪+体育+ 100 +主+街+西风，+ R + 02891-2194&安培;安培; hnear =&放大器;放大器;半径= 15000&放大器;放大器; T = M&放大器;放大器; 11 = 41.379063，-71.831102&放大器;放大器; SPN = 0.015457,0.027466&放大器;放大器; Z = 15&放大器;放大器; iwloc = lyrftr：米，9024240540147588029,41.375323，-71.831043>查看大图< / a>< / small>< / p>
通常情况下，当您想排列并排在一个页面上，你有两种选择：
- 老派的方式 - 使用表格（如果您使用Dreamweaver这样的程序，相当容易 - 插入>表）
- 更好的方法 - 使用CSS。这对你来说可能有点难，因为你说你没有使用过HTML，所以我假设CSS。
CSS方式需要你创建一个包含两个div（div）的样式表。下面是一些代码的例子：
< style>
＃col1 {width：300px; float：left;}
＃col2 {width：300px; float：right;}
< / style>
上面的代码会在< head>< / head> ; 标签。然后在页面主体中，您只需调用两个div：
< div id =col1>您的内容< / div>
< div id =col2>您的内容< / div>
I am working on a website(this is my first website as a developer) and I was wondering if someone could help me align these to items next to each other horizontally. I don't know how to code HTML so I am completely unfamiliar with this. For the most part when developing sites I go and make due with what is online to help but this instance I am with your help.
The site is using WordPress and this is going to be a page. With a table from W-P Table reloaded and a Google map. Here is the code currently:
<p style="text-align: left;">[table id=4 /]<small></small></p><p style="text-align: right;">
<iframe src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Avie's+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&aq=&sll=41.375316,-71.831092&sspn=0.006948,0.016512&vpsrc=0&g=100+Main+Street,+Westerly,+R+02891-2194&ie=UTF8&hq=Avie's+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&hnear=&radius=15000&t=m&ll=41.379063,-71.831102&spn=0.015457,0.027466&z=15&iwloc=lyrftr:m,9024240540147588029,41.375323,-71.831043&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="640" height="480"></iframe>
<small><a style="color: #0000ff; text-align: left;" href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Avie%27s+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&aq=&sll=41.375316,-71.831092&sspn=0.006948,0.016512&vpsrc=0&g=100+Main+Street,+Westerly,+R+02891-2194&ie=UTF8&hq=Avie%27s+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&hnear=&radius=15000&t=m&ll=41.379063,-71.831102&spn=0.015457,0.027466&z=15&iwloc=lyrftr:m,9024240540147588029,41.375323,-71.831043">View Larger Map</a></small></p>
Typically when you want to line something up side by side on a page, you have two options:
- The old school way - Use Tables (If you are using a program like Dreamweaver, this should be fairly easy - Insert > Table)
- The better way - Using CSS. This may be a little harder for you to deal with since you said you have no experiencing working with HTML and I am presuming CSS.
The CSS way would require you to create a stylesheet with two divisions (divs). Here's an example of some code that would do that:
<style>
#col1{ width:300px; float:left;}
#col2 { width:300px; float: right;}
</style>
The above code would go between your <head></head> tags. Then in the body of your page, you would simply call the two divs:
<div id="col1">YOUR CONTENT</div>
<div id="col2">YOUR CONTENT</div>
这篇关于在HTML中并排排列元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
