Div内容对齐问题

时间：2016-10-05 11:02:21

标签： html css alignment

我对HTML和CSS没有多少经验。我在调整div内容方面遇到了一些问题。文本（Oculus Rift，下一代虚拟现实）必须与右下方的鼠标滚动按钮一致。但文本重叠上面的div（我的粘贴标题）。我无法让它发挥作用。我托管了网站over here。我希望它看起来像this。

HTML：

<!DOCTYPE html>
<html>
<head>
<title>InGadget | D&#233; site voor al uw gadget nieuws!</title>

<meta name = "keywords" content = "InGadget | D&#233; site voor al uw gadget nieuws!" />
<meta name = "description" content = "InGadget is d&#233; site voor alles over gadgets." />
<meta name="viewport" content="width=device-width">


<link href="main.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/animatescroll.js"></script>

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

<script src="js/classie.js"></script>
    <script>
        function init() {
            window.addEventListener('scroll', function(e){
                var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                    shrinkOn = 100,
                    header = document.querySelector(".navbar");
                if (distanceY > shrinkOn) {
                    classie.add(header,"scroll");
                } else {
                    if (classie.has(header,"scroll")) {
                        classie.remove(header,"scroll");
                    }
                }
            });
        }
        window.onload = init();
</script>

<script>
    function logoSwitch () {
        $('.altLogo').each(function() {
            $(this).css('top',
                        $('.startLogo').offset().top -  $(this).closest('.row').offset().top
                       );
        });
    };

    $(document).scroll(function() {logoSwitch();});

    logoSwitch();
</script>

</head>
<body>
            <div class="navbar">
            <div class="container clearfix">
                <a id="logo" href="index.html"></a>
                <div class="nav">
                    <a href="index.html">Home</a>
                    <a href="#">Nieuws</a>
                    <a href="#">Forum</a>
                    <a href="#">Things I &#10084;</a>
                    <a href="#">Contact</a>
                </div>
            </div>
        </div>
    <div class="header">
        <div class="header-content">
            <h1>Oculus Rift<br>
                Next-generation Virtual Reality.</h1>
            <div class="mouse-icon" onclick="$('.section1').animatescroll();" style="cursor:pointer;">
                <div class="wheel"></div>
            </div>
        </div>
    </div>

    <div class="section1">
        Placeholder
    </div>

</body>
</html>

CSS：

/* BASICS */
@font-face {
    font-family: Neusa-SemiBold;
    src: url(fonts/neusa/Neusa-SemiBold.otf);
}

@font-face {
    font-family: Neusa-ExtraBold;
    src: url(fonts/neusa/Neusa-ExtraBold.otf);
}

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: auto;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

/* NAVBAR */
.navbar {
    width: 100%;
    height: 150px;
    position: fixed;
    z-index: 999;
    -webkit-transition: height 0.6s;
    -moz-transition: height 0.6s;
    -ms-transition: height 0.6s;
    -o-transition: height 0.6s;
    transition: height 0.6s;
}

#logo {
    width: 275px;
    height: 150px;
    background: transparent url(images/logo.png) no-repeat;
    background-size: contain;
    float: left;
}

.scroll #logo {
    background-image: url(images/logo2.png);
}

.nav {
    float: right;
    right: 0px;
}

.nav a {
    line-height: 75px;
    padding-left: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;    
    color: #ffffff;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}

.nav a:hover {
    text-decoration: underline;
}

/* STICKY NAVBAR */

.navbar.scroll {
    background-color: #ffffff;
    height: 75px;
}

.navbar.scroll#logo {
    width: 140px;
    height: 140px;
    background: transparent url(images/logo2.png) left top no-repeat;
}

.navbar.scroll .nav a {
    color: #000000;
    line-height: 75px; }

/* SECTIONS */
.header {
    background: 
        linear-gradient(to top right,
            rgba(255, 65, 54, 0.5),
            rgba(24, 0, 255, 0.5)
        ),
        url(nieuws/VR/images/oculusrift.jpg) fixed;
    background-size: cover;
    height: 100vh;
    width: 100%;
}

.header-content {
    width: 80%;
    margin: auto;
}
.header-content h1 {
    font-family: 'Neusa-ExtraBold', sans-serif;
    text-transform: uppercase;
    font-size: 72px;
    color: #ffffff;
    text-align: right;
}

.section1 {
    margin-top: 20px;
    background-color: #f2f2f2;
    height: 500px;
}

/* MOUSE ICON */
.mouse-icon {
    border: 4px solid #ffffff;
    border-radius: 32px;
    height: 50px;
    width: 30px;
}

.mouse-icon .wheel {
    -webkit-animation-name: scrolling;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: scrolling;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.mouse-icon .wheel {
    border-radius: 10px;
    background: #ffffff;
    width: 6px;
    height: 10px;
    top: 4px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

@-webkit-keyframes scrolling    {
    0%   { top:5px;  opacity: 0;}
    30%  { top:10px; opacity: 1;}
    100% { top:25px; opacity: 0;}
}

@keyframes scrolling    {
    0%   { top:5px;  opacity: 0;}
    30%  { top:10px; opacity: 1;}
    100% { top:25px; opacity: 0;}
}

5 个答案:

答案 0 :(得分：0)

.header-content h1{
    position: absolute;
    right: 20px;
    bottom: 20px;
}

.mouse-icon {
    position: absolute;
    left: 20px;
    bottom; 20px;
}

答案 1 :(得分：0)

您需要将h1和mouseicon绝对定位到底部

.mouse-icon {
    border: 4px solid #ffffff;
    border-radius: 32px;
    height: 50px;
    width: 30px;
    position: absolute;
    left: 10px;
    bottom; 10px;
}

.header-content h1 {
    font-family: 'Neusa-ExtraBold', sans-serif;
    text-transform: uppercase;
    font-size: 72px;
    color: #ffffff;
    text-align: right;
    position: absolute;
    right: 10px;
    bottom; 10px;
}

答案 2 :(得分：0)

将'header-content'div放在另一个div中，使用类'header-content-container'并添加此CSS：

//Usings here

namespace MyNamespace
{
    public partial class wdSubmit : Window, INotifyPropertyChanged
    {
        private BctsSvc.BctsServiceSoapClient svc;

        private BctsChange _CurrentChange;

        public BctsChange CurrentChange
        {
            get { return _CurrentChange; }
            set { _CurrentChange = value; OnPropertyChanged("CurrentChange"); }
        }


        private List<BctsSvc.DOSets> _LeadingSets;
        public List<BctsSvc.DOSets> LeadingSets
        {
            get
            {
                return _LeadingSets;
            }
        }


        public wdSubmit()
        {
            InitializeComponent();
            svc = new BctsSvc.BctsServiceSoapClient();
            _LeadingSets = svc.GetLeadSets().ToList();
            OnPropertyChanged("LeadingSets");

            this._CurrentChange = new BctsChange();

            this.DataContext = CurrentChange;

            CurrentChange.PropertyChanged += new PropertyChangedEventHandler(CurrentChange_PropertyChanged);
        }

        void CurrentChange_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            OnPropertyChanged("CurrentChange");
            OnPropertyChanged(e.PropertyName);
        }

        private void btnSelectEngineer_Click(object sender, RoutedEventArgs e)
        {
            byContact newContact = new frmSearchEngineer().ShowSearch();

            if (newContact != null)
            {
                CurrentChange.Engineer = newContact;
                PropertyChanged(CurrentChange, new PropertyChangedEventArgs("LeadingSet"));
                PropertyChanged(CurrentChange.LeadingSet, new PropertyChangedEventArgs("LeadingSet"));

            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(CurrentChange, new PropertyChangedEventArgs(propertyName));
        }
    }
}

答案 3 :(得分：0)

${Property}

将这些样式与其他CSS样式一起使用。如果您有任何其他要求，请告诉我。

答案 4 :(得分：0)

类似的东西：https://jsfiddle.net/qs1qyL9c/ 

<td><a href="booking.jsp?cid=<%=resultset.getString("fno")%>">gg</a></td>
相关问题
最新问题