responsive-design

问题 How can I create a responsive HTML table that each cell/TD has equal width and height? So when I resize the browser window or resize the table's container, the table will resize, but each cell will have equal height and width. Foundation doesn't take care of that. When I initialize the TD with fixed width and height in pixels, when resize the width of the browser, it shrinks the td horizontally, but doesn't keep the same aspect ratio. I am using Foundation as my my base responsive framework.

问题 How can I do to change background image onClick with jquery or java script? For Example: I have Six(6) images and I want change to NEXT background image when i click on ">" (next arrow) and change to previous background image when I click on "<" (back arrow). I'm developing this website with responsive html5 and css3. 回答1: You can list your images in an array and then change the background-image css attribute on click: var images = ['url("image1.png")', ...], curIndex = 0; // Left arrow

问题 I am using Bootstrap 3 in my WordPress theme. Most of the site will make use of the responsive features, but for a few pages that host data visualizations I would like to force a fixed width. How would I set this non-responsivity up? (Would be nice if there was some sort of body class (.non-responsive) that could take precedence over the responsive features?) 回答1: There is a section in Bootstrap docs about disabling responsivness: http://getbootstrap.com/getting-started/#disable-responsive

问题 I have two div s in a parent div . They render side by side <image><info> but on smaller screens I want them to render one under the other and swap positions, like <info> <image> So, their real order in html is <info> <image> and they both have float:right so they appear swapped and side by side. On smaller screens they both have float:none and thet appear one under the other as they should. I used Shlomi's answer from here and it works fine. The problem. When horizontal, I wan to align the

问题 I created a responsive grid in Ionic which doesn't work properly. The Grid is not responsive. So it isn't automatically adjusted on different screen size and set no linebreak if I add many Buttons or delete these to the/from the system. Either they merge into each other or all the buttons are in a column below the each other on small screens. How can i solve this? I add or delete all the buttons in a JSON-File. From there I parse the Buttons in to the system. JSON: 7 Buttons [ { "_comment":

问题 The Firefox and Chrome margin-top size are different i attached the two browser images and my css code please give a feedback how to fix that issues. Firefox ui: Chrome ui: CSS code: .toparea-right .user-img > img { border-radius: 50%; display: inline-block; -webkit-transform: scale(0.90); -moz-transform: scale(0.90); transform: scale(0.90); vertical-align: inherit; float: right; margin-right: -395px; margin-top: -115px; width: 45px; } In chrome margin-top: -115px is working but in Firefox

问题 I have an image that I need to put divs on top of for links. I did this fine when I initially created the website, but now I am tasked with making it responsive, so I can no longer use -top and left values to position the overlay divs because they don't move with the image. Trying to put the image as a background image so that the position of the overlays can be set and contained within the parent container. I have tried using the background size property (cover, contain, 100%), but they will

问题 I tried to create a responsive iframe, it renders good on pc but is not responsive if we consider mobile devices. Here is my jsfiddle Here is my HTML <div class="outer"> <div class="noScrolling"> <iframe class="inner" src="https://www.initialstate.com/embed/#/tiles/kkCIxiV4PJmg6y88ldn5HvhNiALMBdHp" frameborder="0" allowfullscreen></iframe> </div> CSS .outer{ position: relative; background: url(background-with-backdrop.jpg) no-repeat center; background-size: 100% 100%; //width:420px; height

问题 Firstly I am doing a responsive website, the layout is a bit complicated.I have two columns in a table. The client need last column first in mobile and the first column last. I did that using table-header-group and table-footer-group. The parent table takes the width of the Container, but the columns not taking table's width. Please find the attached image here. You can see the table width in the last of the image, but the column's not taking that width. Can anyone know how to fix the column

问题 I am attempting to create a two-row, three-column grid layout: This is pretty simple. I am wondering how to expand any one of the given cells, causing the other cells to rearrange around the expanded cell: I am not looking for a pure-CSS solution necessarily. I have it working, but I am hardcoding absolute positions based on what cell I am expanding, which feels dirty :/ Thanks! 回答1: You can use a bin-packing solution like a treemap. You can sort the rectangles and create a tree and split the