Question

我有一个网页，中间的图片缩放到约60％宽。在图片旁边，我有3个按钮，它们是旋转文本。

我需要按钮尺寸相同并均匀分开。我还需要3个按钮的高度与图片的高度大致相同，这意味着他们需要根据浏览器大小调整大小。这现在有效，但对我来说似乎非常笨重。

我的问题是：我现在正在使用一些CSS和Javascript进行此操作，但我想知道是否有更好的方法，也许使用所有CSS？

<div id="homeTop">              

        <div id="sliderPad">
            <div class="flexslider">
              <ul class="slides">
                <li>
                  <img src="data/homeSlides/brennys.jpg">
                  <p class="flex-caption">Brenny's Motorcycle Clinic &gt;</p>
                </li>
                <li>
                  <img src="data/homeSlides/aledoFireStation.jpg">
                  <p class="flex-caption">Aledo Fire Protection District &gt;</p>
                </li>
                <li>
                  <img src="data/homeSlides/trueNorth.jpg">
                  <p class="flex-caption">True North &gt;</p>
                </li>
                <li>
                  <img src="data/homeSlides/operationThreshold.jpg">
                  <p class="flex-caption">Operation Threshold &gt;</p>
                </li>
                <li>
                  <img src="data/homeSlides/sadler.jpg">
                  <p class="flex-caption">Sadler &gt;</p>
                </li>                       
              </ul>
            </div>      
      </div>            

        <div id="sideButtons">
          <div class="sideBtn">
            <div class="sbInside">                          
                JUST AWARDED
            </div>  
            </div>
          <div class="sideBtn">
            <div class="sbInside">                          
                UNDER CONSTRUCTION
            </div>      
            </div>
          <div class="sideBtn">
            <div class="sbInside">                          
                RECENTLY COMPLETED                  
            </div>      
            </div>              
        </div>                                                                                                

</div>

CSS：

#sideButtons{
    width:50px;
    margin-left:5%;         
    float:left;
    top:0;
    position:absolute;
    margin-top:25px;
    overflow:hidden;
}


.sideBtn{
    width:100%;
    background:#44616e; 
    float:left;
    height:130px;
    margin-top:10px;
    box-shadow: inset 0 0 100px #1f2d33;
    position:relative;
}

.sbInside{
  position: absolute;
  top: 35%;
  left: -35%;
    color:#f47421;  
    font-size:.6em;
    text-align:left;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);   
}

和脚本：

<script>
    $(function(){

            $('.flexslider').flexslider({
                animation: "fade",
          slideshow: true,
          slideshowSpeed: 5000
            });         


          scaleSideTabs();


            $(window).on("resize",function(){
                scaleSideTabs();
            });     
    });

    // scale 3 side tabs
    function scaleSideTabs(){       
            setTimeout(function(){
                  // don't resize if in mobile mode         
                  // they will be moved to below the picture
                    if( $(window).width() <=768 ){
                        $(".sideBtn").height("80px");                           
                        $(".sideBtn").each(function(){                  
                                var os=$(this).offset();
                                var w=$(this).width();
                                var iw=$(this).find(".sbInside").width();                       
                                var ls=(os.left)+(w-iw)/2;                      
                                $(this).find(".sbInside").offset({top:os.top+30,left:ls});                      
                        });                 
                        return;
                    }  

                  var spacer=10;
                    var sh=$(".slides").height();
                    var she=( (sh-(3*spacer)) /3)-10;  // scale to 1/3 minus 5px space between

                    // set height
                    $(".sideBtn").height(she);

                    // set left margin of inside text
                    // resize text: font size is .7em at 133h : scale (190)         
                    $(".sideBtn").each(function(){
                        var fs=she/190;
                        if(fs>.8){fs=.8;}
                        $(this).find(".sbInside").css("font-size",(fs).toString()+"em");                    
                        var os=$(this).offset();
                        $(this).find(".sbInside").offset({left:os.left+5});                         
                    });             
            },500);                 

    }

</script>

在手机上查看时，3个按钮会移动到图片下方。

@media screen and (max-width: 768px) {
        #sideButtons{
            width:100%;
            margin-left:auto;           
            margin-right:auto;          
            float:none;
            top:auto;
            position:relative;
            margin-top:auto;
            text-align:center;
        }

        .sideBtn{
            width:31%;
            float:none;
            display:inline-block;
            height:80px;
            margin-top:auto;
            margin-right:5px;
        }

        .sbInside{
          position: absolute;
          top: 40%;
          left: auto;
            color:#f47421;  
            font-size:.6em;
            text-align:center;
            width:100%;

            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            filter: none;           
        }           

}

Answer 1

我认为您正在寻找类似的内容：https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/13/

通过将img div设置为80vh，您只需对按钮大小进行一些数学计算即可。

设置按钮宽度，如height: calc((80vh - 20px)/ 3);

80vh是为了匹配图像高度，-20px是为了计算两者之间的边距而你除以/ 3因为有3个按钮。

css居中并调整旋转文本的大小

1 个答案: