Html 正在尝试在文本之间对齐<；部门>；以一种在所有屏幕尺寸上都很好看的方式显示表格_Html_Css_Alignment

Html 正在尝试在文本之间对齐<；部门>；以一种在所有屏幕尺寸上都很好看的方式显示表格

html css

Html 正在尝试在文本之间对齐<；部门>；以一种在所有屏幕尺寸上都很好看的方式显示表格,html,css,alignment,Html,Css,Alignment,我正在创建一个三栏式的网页来描述我的经历和一些关于我的信息。我希望左侧和右侧列具有边框，但中间的列不具有边框。我不希望任何东西重叠，它需要在所有屏幕大小上都看起来很好。（除了明显可笑的例外，例如智能手表）。下面是我的HTML和CSS，它们链接在一起。我是网络编程新手，任何对Objective-C的隐喻都会有所帮助 HTML: CSS: 以下是修订后的代码： HTML <html> <head> <link type=

我正在创建一个三栏式的网页来描述我的经历和一些关于我的信息。我希望左侧和右侧列具有边框，但中间的列不具有边框。我不希望任何东西重叠，它需要在所有屏幕大小上都看起来很好。（除了明显可笑的例外，例如智能手表）。下面是我的HTML和CSS，它们链接在一起。我是网络编程新手，任何对Objective-C的隐喻都会有所帮助

HTML: CSS:

以下是修订后的代码：

HTML

<html>
        <head>
                <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
                <title>About Me</title>
                <meta http-equiv="refresh" content="1" > <!--TEMPORARY-->
        </head>
        <body>
          <div class="container">
            <div class="left">
                    <h2 class=tableheader>About Me:</h2>
                    <ul>
                        <li>I am a 16 year old boy from East Norriton, PA.</li>
                         <li>I am currently attending Norristown Area High School.</li>
                         <li>Next year, I will be attending Montgomery Technical school for networking.</li>
                        <li>I have been programming since I was 11.</li>
                        <li>I am fluent in HTML5/CSS, and am currently in the process of learning Javascript and Objective C.</li>
                        <li>Social Plug:
                        <br></br><br></br>  
                            <a class="links" href="http://www.twitter.com/AlexNoyle">Twitter</a><br></br>
                            <a class="links" href="http://instagram.com/alexnoyle">Instagram</a><br></br>
                            <a class="links" href="https://www.youtube.com/user/alexnoyle">Youtube</a><br></br>
                            <a class="links" href="http://stackoverflow.com/users/3366059/alex-noyle">Stack Overflow</a>
                       </li>
                   </ul>
        </div>
        <div class="middle">
          <h2>Alex Noyle</h2>
          <h4>My Vision</h4>
          <h4>Contact</h4>
          <p>You can e-mail me @ alexnoyle@icloud.com. I reply quickly and have a self-proclaimed good sense of design with a bias to minimalism and simplicity.</p>
        </div>
        <div class="right">
            <h2 class="tableheader">Experience:</h2>
            <ul>
                <li>Avid member of the IOS Jailbreaking community since 2009.</li>
                <li>Advanced Linux command line user / ESN flasher.</li>
                <li>UNIX Filesystem reverse-engineering since 2012.</li>
                <li>Undisclosed and EXITING projects coming in the near future. *Hint: Modifying IOS*</li>
                <li>Your project here! As a freelance developer I can do almost anything you request.</li>
                <li>Open Source is the future. Get the source code for this website here:
                </li>
                <br></br><br></br>
                <!--Add proper download links below-->
                <a class="links" href="www.google.com">Mirror 1</a>&nbsp;|
                <a class="links" href="www.twitter.com">Mirror 2</a>
              </ul>
            </div>
          </div>
      </body>
</html>

* {
    font-family: Verdana;

    box-sizing: border-box;
}

li {
    padding-top: 30px;
    padding-right: 20px;    
}

body {
  width: 100%;
  min-width: 1024px;
}

.container {
  display: table;
  width: 100%
}

.left,
.middle,
.right {
  display: table-cell;
  padding: 10px
}

.left {
    height: 750px;
    width: 300px;
    margin-top: 5px;
    padding-top: 10px;
    text-align: left;
    border: 1px solid black;
    background-color: white;
    position: relative;
}

.tableheader {
    text-align: center;
}

.links {
    text-decoration: none;
}

.right {
    height: 750px;
    width: 300px;
    margin-top: 5px;
    padding-top: 10px;
    text-align: left;
    border: 1px solid black;
    background-color: white;
    position: relative;
}

.middle {
  width: 500px
}

初学者提示：

使用

*{box size:border box}

这是CSS中的

width

属性，它将您与其他初学者区分开来

使用

reset.css

摆脱不需要的默认行为样式

对容器使用

display:table

和

display:table cell

。它让生活变得容易多了

老兄，你的代码太乱了。错误放置的标签，错误的缩进，错误的css选择器实践，等等

不断练习：）你最终会到达那里的

使用codepen或jsfiddle来制作一个实时演示，而不是一个pastebin，这样可以更容易地帮助降低屏幕尺寸（智能手机）——我不会使用3列视图（您可以检查css媒体查询）。有多种方法可以做事情，这取决于您实际想要什么。当屏幕尺寸减小时，您希望所有3列都缩小还是只缩小中间的列？是否要相应更改字体大小？处理缩放的基本方法是使用基于高度和宽度的百分比（占浏览器屏幕的百分比）。我很欣赏这个方法。我是新手，但一直在练习。我希望有一天能做得很好。非常感谢你的帮助！没问题！慢慢来学习，享受旅程-