jquery - sibling divs jump to new line when resizing -

-

I am creating 3 rows and I am creating 4 columns in each row. But what I am trying to achieve is that 1 when any column is changed to one row, then the remaining column should be resized according to the total remaining width of the row. Suppose that the total width of the line is 100% and if I change the size of 60% to 1% then the remaining three columns should be taken according to the remaining 40%. As it happens in my HTML, its size does not change, the rest of the column runs below.

This is my code. 

  & lt; Div id = "data-1" & gt; & Lt; Div class = "line" style = "width: 100%;" & Gt; & Lt; Div class = "column" style = "float: left; overflow: hidden; minimum-width: 25%;" & Gt; & Lt; / Div & gt; & Lt; Div class = "column" style = "minimum-width: 25%; float: left; overflow: hidden;" & Gt; & Lt; / Div & gt; & Lt; Div class = "column" style = "minimum-width: 25%; float: left; overflow: hidden;" & Gt; & Lt; / Div & gt; & Lt; Div class = "column" style = "minimum-width: 25%; float: left; overflow: hidden;" & Gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "line" style = "width: 100%;" & Gt; & Lt; Div class = "column" style = "float: left; overflow: hidden; minimum-width: 25%;" & Gt; & Lt; / Div & gt; & Lt; Div class = "column" style = "minimum-width: 25%; float: left; overflow: hidden;" & Gt; & Lt; / Div & gt; & Lt; Div class = "column" style = "minimum-width: 25%; float: left; overflow: hidden;" & Gt; & Lt; / Div & gt; & Lt; Div class = "column" style = "minimum-width: 25%; float: left; overflow: hidden;" & Gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "line" style = "width: 100%;" & Gt; & Lt; Div class = "column" style = "float: left; overflow: hidden; minimum-width: 25%;" & Gt; & Lt; / Div & gt; & Lt; Div class = "column" style = "minimum-width: 25%; float: left; overflow: hidden;" & Gt; & Lt; / Div & gt; & Lt; Div class = "column" style = "minimum-width: 25%; float: left; overflow: hidden;" & Gt; & Lt; / Div & gt; & Lt; Div class = "column" style = "minimum-width: 25%; float: left; overflow: hidden;" & Gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 According to this I come under the structure:  
 Enter image details here  
 But when I change the size of a column, I get this:  
  Enter the image details here   
 I want to receive it again:  
  Enter image details here    
 
 
  Pryu in CSS Media Queries  and  
  display   table  and  display   table-cell   Like   
  CSS   
  .row {display: table; Width: 100%; } .column {display: table-cell; Height: 20px; Border: Solid 1px red; } @ Media All and (max-width: 500px) {# data-1 .row: First-Child & gt; .column: First-child {width: 60%;}}   
  HTML   
  & lt; Div id = "data-1" & gt; & Lt; Div class = "row" "& gt; div class =" column "& gt; & lt; / div & gt; & lt; div class =" column "& gt; & lt; / div & gt; & lt; Div class = "column"> 
 
 
  
 = "Row" "& gt; & Lt; Div class = "column" & gt; & Lt; / Div & gt; & Lt; Div class = "column" & gt; & Lt; / Div & gt; & Lt; Div class = "column" & gt; & Lt; / Div & gt; & Lt; Div class = "column" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" "& gt; div class =" column "& gt; & lt; / div & gt; & lt; div class =" column "& gt; & lt; / div & gt; & lt; 
 
 
   
 / P>  

 




  






























Comments











Post a Comment

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

-
I'm trying to call the Python using the Java program py4j . I've been installing the plug-in Eclipse and test name Piidvi project. I'm trying to execute the following part of the code found on py4j webpage: Import from py4j.java_gateway to JavaGateway, java_import gateway = JavaGateway () jvm = gateway.jvm java_import (jvm, '' Org.eclipse Kkorkrisorsej. * ") Vrkspes_rut = Jvankresourkesplginkgetvrkspas (). GetRoot (Gateway .help (workspace_root, '* Projects *') project_names = [project.getName () (for projects workpace_root.getProjects))] print (Projekt_nam) But I There is an error in import. I have checked that the P4JJ is present in the Jar Eclipse plugin directory. Can anyone help please? I had to install the py4j application
Read more

python - Receiving "KeyError" after decoding json result from url -

-
I am new to Python I am trying to parse JSON result from a URL. Basically, I was using the following: response = urllib.request.urlopen (url) json_obj = json.load (response) It should be a stroke "str 'not' bytes' in the lines of a given" JSON object, so after searching on the StackoverView Flo, I decode the response in this way: F = urllib.request.urlopen (Url) charset = f.info (). Get_param ('charset', 'utf8') data = f.read () decoded = json.loads (data.decode (charset)) If I print "decode" I is as follows: { 'link': { 'summary data': 'https: // localhost / piwebapi / streams / p0_7qHaW4UHU-RlCaz8tpasAAQAAAAU0hJTExNQU42NDIwXFNJTlVTT0lE / summary' 'value': 'https: // localhost / Piwebapi / streams / P0_7qHaW4UHU-RlCaz8tpasAAQAAAAU0hJTExNQU42NDIwXFNJTlVTT0lE / price ',' InterpolatedData ':' https: // localhost / Piwebapi / streams / P0_7qHaW4UHU-RlCaz8tpasAAQAAAAU0hJTE...
Read more

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -

-
"itemprop =" text "> I am writing applications that use WebSphere MQ to send messages. My unittests (for flow), I want to verify that I have put the correct message on the response queue. I am trying to figure out how to do this. My main obstacle is that I think it might be scary to clear the queue before running in my queue because the same queue can be used by other applications, I thought a decent solution would be a new line The manager will remove the queue for my solidarity and after using it. So my question is: Is it possible to use C # by using queue manager and queue? After the For future reference and future people, who want to make queues. I thought how to make and remove IBM MQ QE (not quenhers) with PCM messaging. It is not very simple, but it can be done. We have implemented it in a library and it is being used to create and delete commands before and after integration tests. The most important part of the code in this library is shown in the...
Read more