个人中心
gpt4 book ai didi

html - 为什么我的网页不遵守最大宽度和最小宽度规则？

转载 作者：行者123 更新时间：2023-11-28 01:49:43 25 4
gpt4 key购买 nike

我的简历网页有问题，没有遵守我在 css 中的最小宽度和最大宽度规则。我不太确定为什么。我的页面看起来很棒，两边的边距都低于 1200 像素的宽度，但是当宽度高于此宽度时，整个页面内容开始列在右侧并移出屏幕。我正在尝试使整个正文的最大宽度为 992 像素，因为在屏幕上以大约一张纸的宽度查看简历时效果更好。但是，全尺寸布局看起来很糟糕。

这是我的 HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Resume - Tyler Cheek</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div class="container header">
            <h1>Tyler Cheek</h1>
        </div>
        <div class="container">
            <div class="row">
                <div class="contact-left col-md-6 col-sm-12 col-xs-12">
                        <p>(919)-397-8116</p>
                        <p>Github: <a href="https://github.com/Hoid" target="_blank">github.com/Hoid</a></p>
                        <p>tylerlcheek@gmail.com</p>
                </div>
                <div class="contact-right col-md-6 col-sm-12 col-xs-12">
                    <p>2604 Hillsborough Street Apt. 202</p>
                    <p>Raleigh, NC 27607</p>
                </div>
            </div>
        </div>
        <div class="container">
                <h5><b>Summary</b></h5>
            <p>&emsp;&emsp;Team player software engineer with open-source, frontend, backend, and management experience. I make others around me better through excellent communication and a purely constructive attitude. You should hire me because I have a passion for making cool stuff that makes people’s lives better and the broad technical aptitude to do it.</p>
        </div>
        <div class="container">
            <h5><b>Objective</b></h5>
            <p>&emsp;&emsp;Seeking a full-time position in Software Development for an innovative company that will help me specialize my skills. I have a vast foundation that allows me to learn new things quickly and want experiences that will help me deepen my skillset.</p>
        </div>
        <div class="container" style="overflow: auto;">
            <h5><b>Education</b></h5>
            <div class="row">
                <div class="education-left col-sm-6 col-xs-12">
                    <p>&emsp;&emsp;NC State University, Raleigh NC</p>
                    <p>&emsp;&emsp;B.S., Computer Engineering May 2017</p>
                </div>
            </div>   
        </div>
        <div class="container professional-experience">
            <h5><b>Professional Experience</b></h5>
            <div>
                <div style="overflow: auto;">
                    <div class="position">
                        <p><u>QA Lead</u></p>
                    </div>  
                    <div class="company-dates">
                        <p>Imaginovation</p>
                        <p>December 2017 – April 2018</p>
                    </div> 
                </div>
                <ul class="position-information">
                    <li>Led a team of 3 offshore and 1 local Test Engineers in Quality Control, the Software Test Life Cycle, Automation best practices, Team Communication, and Time Management</li>
                    <li>Introduced and Documented a new effort in website test automation using Snaptest</li>
                    <li>Initiated a system of code reviews and a deployment plan throughout the company</li>
                    <li>Developed 10 automated test scripts for API endpoints in Go and numerous others in Postman using Javascript</li>
                    <li>Created over 75 automated tests for websites across various projects in Snaptest</li>
                </ul>
            </div>
            <div>
                <div style="overflow: auto;">
                    <div class="position">
                        <p><u>Developer/Project Manager</u></p>
                    </div>  
                    <div class="company-dates">
                        <p>Imaginovation</p>
                        <p>April 2017 – December 2017</p>
                    </div> 
                </div>
                <ul class="position-information">
                    <li>Developed a base API framework and production-ready endpoints in Go</li>
                    <li>Designed the Bluetooth LE communication scheme for a mobile application to a custom proprietary IOT healthcare product in C</li>
                    <li>Led 3 teams of developers across 3 projects in multiple platforms, 2 of which were from start to completion</li>
                    <li>Created a Unity demo project with lightsabers for the Meta 2 Augmented Reality headset</li>
                </ul>
            </div>
            <div>
                <div style="overflow: auto;">
                    <div class="position">
                        <p><u>Software Development Student</u></p>
                    </div>  
                    <div class="company-dates">
                        <p>Blackberry</p>
                        <p>Aug. – Dec. 2015</p>
                    </div> 
                </div>
                <ul class="position-information">
                    <li>Delivered solutions for 14 software defects and 2 user stories using Java on Android</li>
                    <li>Contributed to team-wide software integrity using a peer code review process in Gerrit</li>
                </ul>
            </div>
            <div>
                <div style="overflow: auto;">
                    <div class="position">
                        <p><u>Software Test Student</u></p>
                    </div>  
                    <div class="company-dates">
                        <p>Blackberry</p>
                        <p>Aug. – Dec. 2014, May – Aug. 2016</p>
                    </div> 
                </div>
                <ul class="position-information">
                    <li>Documented 51 unique software issues in a Scrum development cycle</li>
                    <li>Scripted automated test suites for several user stories in RIDE, spanning hundreds of test cases</li>
                    <li>Developed an Excel macro that parses thousands of user reviews for keywords and trends</li>
                    <li>Seamlessly Transitioned between 3 mobile operating systems and 2 separate applications</li>
                </ul>
            </div>
        </div>
        <div class="container various-technical-experience">
                <h5><b>Various Other Technical Experience</b></h5>
            <ul class="position-information">
                <li><b>Golang/Open Source:</b> Contributed to the alexa-skills-git-golang and go-jira Github open-source repos</li>
                <li><b>XHTML/CSS:</b> Built a version of this resume using XHTML/CSS</li>
                <li><b>PHP:</b> Personal websitethat interfaces with the OMDB movie search API</li>
                <li><b>Python:</b> Personal desktop app client using PyQT4, UI creation, API utilization, Multithreading</li>
                <li><b>C:</b> Compiler design, Text autocomplete function, GPS application</li>
                <li><b>C++:</b> Team project working with a LIDAR sensor to detect and analyze objects for an autonomous vehicle – used OpenCV and Visual Studio</li>
            </ul>
        </div>
    </body>
</html>

和 CSS:

/*
body {
    max-width: 992px;
}
*/

h1 {
    text-align: center;
}

.position {
    float: left;
    line-height: 0.8em;
}

.company-dates {
    float: right;
    line-height: 0.8em;
    text-align: right;
}

/* Custom, iPhone Retina */ 
@media (min-width : 320px) {
    body {
        margin-top: 10px;
        margin-bottom: 10px;
        min-width: 320px;
        margin-left: auto;
        margin-right: auto;
        font-family: 'Times New Roman', Times, serif;
    }
    .contact-right {
        text-align: left;
    }
}

/* Extra Small Devices, Phones */ 
@media (min-width : 480px) {
    body {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        font-family: 'Times New Roman', Times, serif;
        font-size: 12px;
    }
}

/* Small Devices, Tablets */
@media (min-width : 768px) {
    body {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        font-family: 'Times New Roman', Times, serif;
        font-size: 14px;
    }
    .contact-right {
        text-align: right;
    }
}

/* Medium Devices, Desktops */
@media (min-width : 992px) {
    body {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        max-width: 992px;
        line-height: 1.2em;
        font-family: 'Times New Roman', Times, serif;
        font-size: 14px;
    }
}

/* Large Devices, Wide Screens */
@media (min-width : 1200px) {
    body {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.2em;
        font-family: 'Times New Roman', Times, serif;
        font-size: 14px;
    }
}

最佳答案

在第 30 行的 grid.less CSS 文件(由 bootstrap CSS 文件导入)中，您有:

 .container {
     width: 1170px;
 }

将其 width: auto 设置在头部的(the？)样式 block 中，从而否决了 grid.less 文件，问题应该得到解决。

关于html - 为什么我的网页不遵守最大宽度和最小宽度规则？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50013174/

25 4 0
文章推荐： c++ - 将对象方法传递给变量
文章推荐： javascript - 服务器生成内容之上的 AngularJS
文章推荐： c++ - 如何将两个逗号放在一个 float 中？
文章推荐： javascript - 如何在 Google map API 中仅显示公交路线[火车]？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com