Question

嗨，谢谢你的出色工作。

好的，我的问题有点复杂......我有一个设计精美的标题，带有搜索栏。

我想在搜索栏的左侧添加一个块，但有一件事发生了：我的搜索栏向右移动，因此不再与我的标题顶部导航链接对齐：

图1：在添加徽标块之前，顶部链接和搜索栏垂直对齐。

当我添加一个应该包含我的徽标的块时，搜索栏会向右移动并且对齐方式会被破坏...

Pic2：添加徽标块后，搜索栏向右移动，对齐方式中断。

这是我的项目的网址：http://69.64.88.50/，您可以在其中访问源代码。

我的问题很简单：我希望黄色块不会使搜索栏向右移动并保持对齐。我该怎么办？！？！

我知道我的问题很棘手，但我非常感谢有关如何从社区解决问题的任何帮助或线索。

非常感谢！

Answer 1

您可以绝对定位徽标。

＆＃13;

.header-middle-container {
    position: relative;
}
.header-logo-block {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

＆＃13;

<!DOCTYPE HTML><htmllang="en-us"> 
<base href="http://69.64.88.50/">
  <head>
   <meta charset="utf-8"/>
      <meta name="robots" content="index,follow"/>
   <meta name="viewport" content="width=device-width, minimum-scale=0.25, maximum-scale=1.0, initial-scale=1.0"/>
   <meta name="apple-mobile-web-app-capable" content="yes"/>
   <link rel="icon" type="image/vnd.microsoft.icon" href="/img/favicon.ico?1487631146"/>
   <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico?1487631146"/>
   <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montserrat%7COrbitron:900%7CPT+Sans:400,700,400italic,700italic&subset=latin,cyrillic-ext,latin-ext,cyrillic" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/global.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/autoload/highdpi.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/autoload/jquery.bxslider.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/autoload/responsive-tables.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/autoload/uniform.default.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/product_list.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/modules/blocktags/blocktags.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/modules/homefeatured/homefeatured.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/modules/smartblog/css/smartblogstyle.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/modules/smartblogtag/css/smartblogtags.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/modules/tmheaderaccount/views/css/front.css" media="all"/>
      <link rel="stylesheet" href="/modules/tmproductvideos/views/css/video/video-js.css" media="all"/>
      <link rel="stylesheet" href="/modules/tmproductvideos/views/css/tmproductvideos.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/modules/tmsearch/views/css/tmsearch.css" media="all"/>
      <link rel="stylesheet" href="/js/jquery/plugins/autocomplete/jquery.autocomplete.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/modules/tmmegalayout/views/css/tmmegalayout.css" media="all"/>
      <link rel="stylesheet" href="/modules/tmmediaparallax/views/css/tmmediaparallax.css" media="all"/>
      <link rel="stylesheet" href="/modules/tmmediaparallax/views/css/rd-parallax.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/modules/tmhtmlcontent/css/hooks.css" media="all"/>
      <link rel="stylesheet" href="/themes/theme1384/css/modules/favoriteproducts/favoriteproducts.css" media="all"/>
      <link rel="stylesheet" href="/js/jquery/plugins/fancybox/jquery.fancybox.css" media="all"/>
      <link rel="stylesheet" href="/modules/easyauth/views/css/sign.css" media="all"/>
   <script type="text/javascript">
var FancyboxI18nClose = 'Close';
var FancyboxI18nNext = 'Next';
var FancyboxI18nPrev = 'Previous';
var ajaxsearch = true;
var baseDir = 'http://69.64.88.50/';
var baseUri = 'http://69.64.88.50/index.php';
var contentOnly = false;
var currency = {"id":1,"name":"Dollar","iso_code":"USD","iso_code_num":"840","sign":"$","blank":"0","conversion_rate":"1.000000","deleted":"0","format":"1","decimals":"1","active":"1","prefix":"$ ","suffix":"","id_shop_list":null,"force_id":false};
var currencyBlank = 0;
var currencyFormat = 1;
var currencyRate = 1;
var currencySign = '$';
var displayList = true;
var favorite_products_url_add = 'http://69.64.88.50/index.php?process=add&fc=module&module=favoriteproducts&controller=actions';
var favorite_products_url_remove = 'http://69.64.88.50/index.php?process=remove&fc=module&module=favoriteproducts&controller=actions';
var highDPI = true;
var id_lang = 1;
var instantsearch = false;
var isGuest = 0;
var isLogged = 0;
var isMobile = false;
var page_name = 'index';
var priceDisplayMethod = 1;
var priceDisplayPrecision = 0;
var quickView = false;
var roundMode = 2;
var search_url_local = 'http://69.64.88.50/index.php?fc=module&module=tmsearch&controller=search';
var static_token = '2c7173b441c5cb594483cf8a9c7d4933';
var tmsearch_description = true;
var tmsearch_height = 800;
var tmsearch_image = true;
var tmsearch_limit = true;
var tmsearch_limit_num = 6;
var tmsearch_manufacturer = true;
var tmsearch_price = true;
var tmsearch_reference = true;
var tmsearch_scroll = true;
var token = '7bcc6800d6784049fb2a85adbf82231e';
var usingSecureMode = false;
</script>
<script src="/js/jquery/jquery-1.11.0.min.js"></script><script src="/js/jquery/jquery-migrate-1.2.1.min.js"></script><script src="/js/jquery/plugins/jquery.easing.js"></script><script src="/js/tools.js"></script><script src="/themes/theme1384/js/global.js"></script><script src="/themes/theme1384/js/autoload/10-bootstrap.min.js"></script><script src="/themes/theme1384/js/autoload/14-device.min.js"></script><script src="/themes/theme1384/js/autoload/15-jquery.total-storage.min.js"></script><script src="/themes/theme1384/js/autoload/15-jquery.uniform-modified.js"></script><script src="/themes/theme1384/js/autoload/16-jquery.scrollmagic.min.js"></script><script src="/themes/theme1384/js/autoload/17-jquery.scrollmagic.debug.js"></script><script src="/themes/theme1384/js/autoload/18-TimelineMax.min.js"></script><script src="/themes/theme1384/js/autoload/19-TweenMax.min.js"></script><script src="/themes/theme1384/js/autoload/20-jquery.bxslider.js"></script><script src="/themes/theme1384/js/products-comparison.js"></script><script src="/js/validate.js"></script><script src="/modules/tmheaderaccount/views/js/front.js"></script><script src="/modules/tmproductvideos/views/js/video/video.js"></script><script src="/js/jquery/plugins/autocomplete/jquery.autocomplete.js"></script><script src="/themes/theme1384/js/modules/tmsearch/views/js/tmsearch.js"></script><script src="/themes/theme1384/js/modules/tmmegalayout/views/js/tmmegalayout.js"></script><script src="/modules/tmmediaparallax/views/js/jquery.rd-parallax.min.js"></script><script src="/modules/tmmediaparallax/views/js/jquery.youtubebackground.js"></script><script src="/modules/tmmediaparallax/views/js/jquery.vide.min.js"></script><script src="/modules/tmmediaparallax/views/js/tmmediaparallax.js"></script><script src="/modules/favoriteproducts/favoriteproducts.js"></script><script src="/js/jquery/plugins/fancybox/jquery.fancybox.js"></script><script src="/modules/easyauth/views/js/sign.js"></script><script src="/modules/easyauth/views/js/sign-pop.js"></script><script src="/themes/theme1384/js/index.js"></script>        <script>
        $(document).ready(function(){
            var elem = $('#tmhtmlcontent_home .parallax_banner');
            if (elem.length) {
                $('body').append('        <div class=\"rd-parallax rd-parallax-1\">\n                                                                                                                            <div class=\"rd-parallax-layer\" data-offset=\"0\" data-speed=\"0.3\" data-type=\"media\" data-fade=\"false\" data-url=\"/img/cms/parallax.jpg\" data-direction=\"normal\"><\/div>\n                                                <div class=\"rd-parallax-layer\" data-offset=\"0\" data-speed=\"0\" data-type=\"html\" data-fade=\"false\" data-direction=\"normal\"><div class=\"parallax-main-layout\"><\/div><\/div>\n        <\/div>\n    ');
                var wrapper = $('.rd-parallax-1');
                elem.before(wrapper);
                $('.rd-parallax-1 .parallax-main-layout').replaceWith(elem);
                win = $(window);
                            }
        });
    </script>
    <script>
        $(document).ready(function(){
            $(window).on('load', function(){
                $.RDParallax();
                $('.rd-parallax-layer video').each(function(){
                    $(this)[0].play();
                });
            });
        });
    </script>
</head>
<bodyid="index"class="indexshow-left-columnhide-right-columnlang_entwo-columns"><div class="old-ie"> <a href="http://windows.microsoft.com/en-US/internet-explorer/.."> <img src="http://69.64.88.50/themes/theme1384/img/ie8-panel/warning_bar_0000_us.jpg" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."/> </a> </div>
<div id="page">
<div class="header-container">
   <header id="header">
            <div class="nav">
         <div class="container">
            <div class="row">
               <nav><nav>
	<div class="header_info">
		<ul>
			<li><a href="#">Get Help</a></li>
			<li><a href="#">Contact Us</li></a>
			<li><a href="#">Suggestions</li></a>
			<li><a href="#">Product Database</li></a>
			<li><a href="#">Customer Service</li></a>
		</ul>
	</div>
	<div id="header-login">
		<div class="current header_user_info"><a href="#" onclick="return false;">Sign In</a></div>
		<ul id="header-login-content" class="toogle_content">
							<li>
					<form action="http://69.64.88.50/index.php?controller=authentication" method="post" id="header_login_form">
						<div id="create_header_account_error" class="alert alert-danger" style="display:none;"></div>
						<div class="form_content clearfix">
							<div class="form-group">
								<input class="is_required validate account_input form-control" data-validate="isEmail" type="text" id="header-email" name="header-email" placeholder="Email address" value="" />
							</div>
							<div class="form-group">
								<span><input class="is_required validate account_input form-control" type="password" data-validate="isPasswd" id="header-passwd" name="header-passwd" placeholder="Password" value="" autocomplete="off" /></span>
							</div>
							<p class="submit">
								<button type="button" id="HeaderSubmitLogin" name="HeaderSubmitLogin" class="btn btn-default btn-sm">
									<i class="fa fa-lock left"></i> 
									Sign in
								</button>
							</p>
							<p>
								<a href="http://69.64.88.50/index.php?controller=my-account" class="create">Create an account</a>
							</p>
							<div class="clearfix">
								
							</div>
						</div>
					</form>
				</li>
					</ul>
	</div>
</nav>
</nav>
            </div>
         </div>
      </div>
            <div class="header-middle-container">
		 <div class="header-logo-block">
			logo_container_here
		 </div> 
         <div class="container">
            <div class="row">
               <div id="header_logo"></div>
               <div id="tmsearch" class="clearfix">
	 <span class="btn-toogle active"></span>
	  <form id="tmsearchbox" method="get" action="//69.64.88.50/index.php?controller=search">
		<input type="hidden" name="controller" value="search"/>
		<input type="hidden" name="orderby" value="position"/>
		<input type="hidden" name="orderway" value="desc"/>
		<input class="tm_search_query form-control" type="text" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?" value=""/>
		</form>
		<button class="submit-buttons" id="search-bar-button" type="submit">Search</button>
</div>
            </div>
 
         </div>
      </div>
      <div class="header-nav">
         <nav> 
			 <a href="#">Groceries</a>
			 <a href="#">Household</a>
			 <a href="#">Pet Supplies</a>
			 <a href="#">School & Office</a>
		 </nav>
      </div>
   </header>
</div>
<div class="columns-container">
<div id="columns" class="container">
<div id="slider_row">
   </div>
<div class="row">
<div class="large-left col-md-12col-lg-12">
<div class="row">
<div id="center_column" class="center_column col-xs-12 col-md-12col-lg-12">


  <div class="clearfix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum eros odio, id pellentesque ante vehicula quis. Duis non malesuada ante, at scelerisque augue. Mauris in blandit nulla, et pulvinar lorem. Pellentesque hendrerit enim dictum urna euismod feugiat. Nam volutpat et dui sit amet ullamcorper. Maecenas sit amet bibendum urna, vel facilisis tellus. Nam sed nulla augue. Mauris placerat mattis ullamcorper.

Sed non metus imperdiet, sollicitudin massa pretium, accumsan dui. In id magna ut ligula vehicula rhoncus. Phasellus fringilla vestibulum sapien nec placerat. Vestibulum tempus tempus ante, nec imperdiet ante hendrerit ut. Suspendisse vel risus vitae sem pellentesque sollicitudin sed vel augue. Aenean sagittis faucibus ex, sollicitudin consequat neque tempor id. Maecenas odio lorem, pulvinar condimentum gravida ac, scelerisque sit amet libero. Fusce nec libero sodales, venenatis orci in, cursus quam.

Donec porttitor eget nibh sit amet finibus. Donec vitae tortor nec erat ultrices finibus. Nulla sodales euismod risus at ullamcorper. Praesent pretium risus in dolor dictum convallis. Cras quis vehicula purus. Integer molestie interdum purus quis euismod. Sed sagittis eros eget nibh dapibus posuere.

Morbi mattis tellus eget luctus imperdiet. Praesent porttitor ornare ligula, quis maximus purus porta et. Sed id varius magna. Sed rhoncus aliquam hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum luctus varius. Fusce vel congue urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ut lorem tellus. Fusce tincidunt tincidunt lorem vitae dictum. Maecenas vel felis erat. Mauris commodo lectus eget sapien vestibulum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Morbi sollicitudin ullamcorper nisl, eget iaculis justo ultrices non. Nunc blandit magna at laoreet elementum. Nulla feugiat massa in sollicitudin interdum. Vivamus et mauris suscipit, cursus nulla eu, euismod sapien. Donec rutrum erat massa, sed pellentesque mi vestibulum non. Pellentesque ut tellus sodales, hendrerit metus ultricies, vestibulum elit. Quisque interdum id ligula vitae accumsan. Mauris non tellus risus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum eros odio, id pellentesque ante vehicula quis. Duis non malesuada ante, at scelerisque augue. Mauris in blandit nulla, et pulvinar lorem. Pellentesque hendrerit enim dictum urna euismod feugiat. Nam volutpat et dui sit amet ullamcorper. Maecenas sit amet bibendum urna, vel facilisis tellus. Nam sed nulla augue. Mauris placerat mattis ullamcorper.

Sed non metus imperdiet, sollicitudin massa pretium, accumsan dui. In id magna ut ligula vehicula rhoncus. Phasellus fringilla vestibulum sapien nec placerat. Vestibulum tempus tempus ante, nec imperdiet ante hendrerit ut. Suspendisse vel risus vitae sem pellentesque sollicitudin sed vel augue. Aenean sagittis faucibus ex, sollicitudin consequat neque tempor id. Maecenas odio lorem, pulvinar condimentum gravida ac, scelerisque sit amet libero. Fusce nec libero sodales, venenatis orci in, cursus quam.

Donec porttitor eget nibh sit amet finibus. Donec vitae tortor nec erat ultrices finibus. Nulla sodales euismod risus at ullamcorper. Praesent pretium risus in dolor dictum convallis. Cras quis vehicula purus. Integer molestie interdum purus quis euismod. Sed sagittis eros eget nibh dapibus posuere.

Morbi mattis tellus eget luctus imperdiet. Praesent porttitor ornare ligula, quis maximus purus porta et. Sed id varius magna. Sed rhoncus aliquam hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum luctus varius. Fusce vel congue urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ut lorem tellus. Fusce tincidunt tincidunt lorem vitae dictum. Maecenas vel felis erat. Mauris commodo lectus eget sapien vestibulum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Morbi sollicitudin ullamcorper nisl, eget iaculis justo ultrices non. Nunc blandit magna at laoreet elementum. Nulla feugiat massa in sollicitudin interdum. Vivamus et mauris suscipit, cursus nulla eu, euismod sapien. Donec rutrum erat massa, sed pellentesque mi vestibulum non. Pellentesque ut tellus sodales, hendrerit metus ultricies, vestibulum elit. Quisque interdum id ligula vitae accumsan. Mauris non tellus risus. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum eros odio, id pellentesque ante vehicula quis. Duis non malesuada ante, at scelerisque augue. Mauris in blandit nulla, et pulvinar lorem. Pellentesque hendrerit enim dictum urna euismod feugiat. Nam volutpat et dui sit amet ullamcorper. Maecenas sit amet bibendum urna, vel facilisis tellus. Nam sed nulla augue. Mauris placerat mattis ullamcorper.

Sed non metus imperdiet, sollicitudin massa pretium, accumsan dui. In id magna ut ligula vehicula rhoncus. Phasellus fringilla vestibulum sapien nec placerat. Vestibulum tempus tempus ante, nec imperdiet ante hendrerit ut. Suspendisse vel risus vitae sem pellentesque sollicitudin sed vel augue. Aenean sagittis faucibus ex, sollicitudin consequat neque tempor id. Maecenas odio lorem, pulvinar condimentum gravida ac, scelerisque sit amet libero. Fusce nec libero sodales, venenatis orci in, cursus quam.

Donec porttitor eget nibh sit amet finibus. Donec vitae tortor nec erat ultrices finibus. Nulla sodales euismod risus at ullamcorper. Praesent pretium risus in dolor dictum convallis. Cras quis vehicula purus. Integer molestie interdum purus quis euismod. Sed sagittis eros eget nibh dapibus posuere.

Morbi mattis tellus eget luctus imperdiet. Praesent porttitor ornare ligula, quis maximus purus porta et. Sed id varius magna. Sed rhoncus aliquam hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum luctus varius. Fusce vel congue urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ut lorem tellus. Fusce tincidunt tincidunt lorem vitae dictum. Maecenas vel felis erat. Mauris commodo lectus eget sapien vestibulum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Morbi sollicitudin ullamcorper nisl, eget iaculis justo ultrices non. Nunc blandit magna at laoreet elementum. Nulla feugiat massa in sollicitudin interdum. Vivamus et mauris suscipit, cursus nulla eu, euismod sapien. Donec rutrum erat massa, sed pellentesque mi vestibulum non. Pellentesque ut tellus sodales, hendrerit metus ultricies, vestibulum elit. Quisque interdum id ligula vitae accumsan. Mauris non tellus risus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum eros odio, id pellentesque ante vehicula quis. Duis non malesuada ante, at scelerisque augue. Mauris in blandit nulla, et pulvinar lorem. Pellentesque hendrerit enim dictum urna euismod feugiat. Nam volutpat et dui sit amet ullamcorper. Maecenas sit amet bibendum urna, vel facilisis tellus. Nam sed nulla augue. Mauris placerat mattis ullamcorper.

Sed non metus imperdiet, sollicitudin massa pretium, accumsan dui. In id magna ut ligula vehicula rhoncus. Phasellus fringilla vestibulum sapien nec placerat. Vestibulum tempus tempus ante, nec imperdiet ante hendrerit ut. Suspendisse vel risus vitae sem pellentesque sollicitudin sed vel augue. Aenean sagittis faucibus ex, sollicitudin consequat neque tempor id. Maecenas odio lorem, pulvinar condimentum gravida ac, scelerisque sit amet libero. Fusce nec libero sodales, venenatis orci in, cursus quam.

Donec porttitor eget nibh sit amet finibus. Donec vitae tortor nec erat ultrices finibus. Nulla sodales euismod risus at ullamcorper. Praesent pretium risus in dolor dictum convallis. Cras quis vehicula purus. Integer molestie interdum purus quis euismod. Sed sagittis eros eget nibh dapibus posuere.

Morbi mattis tellus eget luctus imperdiet. Praesent porttitor ornare ligula, quis maximus purus porta et. Sed id varius magna. Sed rhoncus aliquam hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum luctus varius. Fusce vel congue urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ut lorem tellus. Fusce tincidunt tincidunt lorem vitae dictum. Maecenas vel felis erat. Mauris commodo lectus eget sapien vestibulum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Morbi sollicitudin ullamcorper nisl, eget iaculis justo ultrices non. Nunc blandit magna at laoreet elementum. Nulla feugiat massa in sollicitudin interdum. Vivamus et mauris suscipit, cursus nulla eu, euismod sapien. Donec rutrum erat massa, sed pellentesque mi vestibulum non. Pellentesque ut tellus sodales, hendrerit metus ultricies, vestibulum elit. Quisque interdum id ligula vitae accumsan. Mauris non tellus risus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum eros odio, id pellentesque ante vehicula quis. Duis non malesuada ante, at scelerisque augue. Mauris in blandit nulla, et pulvinar lorem. Pellentesque hendrerit enim dictum urna euismod feugiat. Nam volutpat et dui sit amet ullamcorper. Maecenas sit amet bibendum urna, vel facilisis tellus. Nam sed nulla augue. Mauris placerat mattis ullamcorper.

Sed non metus imperdiet, sollicitudin massa pretium, accumsan dui. In id magna ut ligula vehicula rhoncus. Phasellus fringilla vestibulum sapien nec placerat. Vestibulum tempus tempus ante, nec imperdiet ante hendrerit ut. Suspendisse vel risus vitae sem pellentesque sollicitudin sed vel augue. Aenean sagittis faucibus ex, sollicitudin consequat neque tempor id. Maecenas odio lorem, pulvinar condimentum gravida ac, scelerisque sit amet libero. Fusce nec libero sodales, venenatis orci in, cursus quam.

Donec porttitor eget nibh sit amet finibus. Donec vitae tortor nec erat ultrices finibus. Nulla sodales euismod risus at ullamcorper. Praesent pretium risus in dolor dictum convallis. Cras quis vehicula purus. Integer molestie interdum purus quis euismod. Sed sagittis eros eget nibh dapibus posuere.

Morbi mattis tellus eget luctus imperdiet. Praesent porttitor ornare ligula, quis maximus purus porta et. Sed id varius magna. Sed rhoncus aliquam hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum luctus varius. Fusce vel congue urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ut lorem tellus. Fusce tincidunt tincidunt lorem vitae dictum. Maecenas vel felis erat. Mauris commodo lectus eget sapien vestibulum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Morbi sollicitudin ullamcorper nisl, eget iaculis justo ultrices non. Nunc blandit magna at laoreet elementum. Nulla feugiat massa in sollicitudin interdum. Vivamus et mauris suscipit, cursus nulla eu, euismod sapien. Donec rutrum erat massa, sed pellentesque mi vestibulum non. Pellentesque ut tellus sodales, hendrerit metus ultricies, vestibulum elit. Quisque interdum id ligula vitae accumsan. Mauris non tellus risus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum eros odio, id pellentesque ante vehicula quis. Duis non malesuada ante, at scelerisque augue. Mauris in blandit nulla, et pulvinar lorem. Pellentesque hendrerit enim dictum urna euismod feugiat. Nam volutpat et dui sit amet ullamcorper. Maecenas sit amet bibendum urna, vel facilisis tellus. Nam sed nulla augue. Mauris placerat mattis ullamcorper.

Sed non metus imperdiet, sollicitudin massa pretium, accumsan dui. In id magna ut ligula vehicula rhoncus. Phasellus fringilla vestibulum sapien nec placerat. Vestibulum tempus tempus ante, nec imperdiet ante hendrerit ut. Suspendisse vel risus vitae sem pellentesque sollicitudin sed vel augue. Aenean sagittis faucibus ex, sollicitudin consequat neque tempor id. Maecenas odio lorem, pulvinar condimentum gravida ac, scelerisque sit amet libero. Fusce nec libero sodales, venenatis orci in, cursus quam.

Donec porttitor eget nibh sit amet finibus. Donec vitae tortor nec erat ultrices finibus. Nulla sodales euismod risus at ullamcorper. Praesent pretium risus in dolor dictum convallis. Cras quis vehicula purus. Integer molestie interdum purus quis euismod. Sed sagittis eros eget nibh dapibus posuere.

Morbi mattis tellus eget luctus imperdiet. Praesent porttitor ornare ligula, quis maximus purus porta et. Sed id varius magna. Sed rhoncus aliquam hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum luctus varius. Fusce vel congue urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ut lorem tellus. Fusce tincidunt tincidunt lorem vitae dictum. Maecenas vel felis erat. Mauris commodo lectus eget sapien vestibulum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Morbi sollicitudin ullamcorper nisl, eget iaculis justo ultrices non. Nunc blandit magna at laoreet elementum. Nulla feugiat massa in sollicitudin interdum. Vivamus et mauris suscipit, cursus nulla eu, euismod sapien. Donec rutrum erat massa, sed pellentesque mi vestibulum non. Pellentesque ut tellus sodales, hendrerit metus ultricies, vestibulum elit. Quisque interdum id ligula vitae accumsan. Mauris non tellus risus. </div></div></div>
</div></div>
</div>
</div><div class="footer-container container">
    <div class="footer-container-contents">
        <div class="footer-copyright-mark"><a class="_blank" href="http://homecery.org"> Copyright&copy; 2017 Homecery, LLC . All rights reserved.</a></div><ul class="footer-links"><li><a href="#">User Agreement</a></li>
            <li><a href="#">Cookies</a></li>
            <li><a href="#">Sitemap</a></li>
            </ul>
        </div>
    </div>
</div></div>
</body></html>

＆＃13;

Answer 2

您可以使用具有相对和绝对位置的css创建它。

将“position：relative”值添加到.header-middle-container css属性中，并将“position：absolute”添加到.header-logo-block，顶部和左侧为“0”，并使用底部“0” “如果你想伸展它。

它应该是这样的：

.header-middle-container {
    position: relative
}

.header-logo-block {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

这样，您的徽标不会影响搜索栏的位置，但请注意绝对位置和响应性。

Answer 3

你可以试试这个：

<强> CSS

＆＃13;

.header-middle-container {
    position: relative;
}
.header-logo-block {
    background-color: yellow;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

＆＃13;

<强>的Javascript

＆＃13;

$('.header-logo-block').css('width', ($(window).width() - $('.container').width()) / 2 );

＆＃13;

如何在添加新块

3 个答案: